@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */

 @font-face {
    font-family: 'Didactgothic';
    src: url('../fonts/didactgothic.eot');
    src: url('../fonts/didactgothic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/didactgothic.woff') format('woff'),
    url('../fonts/didactgothic.ttf') format('truetype'),
    url('../fonts/didactgothic.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;

}


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
    font-family:"Century Gothic","Didactgothic",Arial, Helvetica, sans-serif;
}


a {
	text-decoration:none; !important;
    cursor: pointer;
}
a:hover {text-decoration: none; !important;}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
#section0 h1 {font-size: 6em;}
.intro p{
    width: 70%;
    margin: 0 auto;
    font-size: 1.5em;
}
.twitter-share-button{
    position: absolute;
    z-index: 99;
    right: 149px;
    top: 9px;
}

#formWarning {
    padding-top:10px;
    padding-bottom:10px;
    border-radius: 4px;
    margin-bottom:10px;
}
/* Custom CSS
 * --------------------------------------- */
body{
	font-family: arial,helvetica;
	color: #333;
	color: rgba(0,0,0,0.5);
}

h1 {
	font-size: 6em;
}
p {
	font-size: 2em;
}
.intro p{
	margin: 0 auto;
	font-size: 1.5em;
}
.section{
	text-align:center;
}

#headerClass {height: 86px;
    position: fixed; left:0;top: 0;z-index: 400;background: #fff;-webkit-box-shadow: 0px 4px 5px 0px rgba(50, 50, 48, 0.49);
    -moz-box-shadow:    0px 4px 5px 0px rgba(50, 50, 48, 0.49);
    box-shadow:         0px 4px 5px 0px rgba(50, 50, 48, 0.49); width:100%;}

.fixed-element {position: fixed; z-index: 300; width: 100%;max-width:1100px;margin: 0 auto;}

/* IE10+ CSS styles go here */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #section1 .fixed-element {position: inherit;}
    #section1 #clubList {
        margin-top: 0px;
    }
}
.stateResults .fixed-element  {max-width:1110px;}

.error input { border-color:#a94442;}

#section0, #section2 {background-repeat: no-repeat; background-size: cover;}
#section0, #section0 h1     {color: #fff;}
#section2 .btn {margin-top: 15px;}
#section2 h1 {margin-bottom: 30px;}
#section3 .fp-slides {max-width: 1100px; width: 100%; color: #fff;padding-bottom: 70px;margin: 0 auto;}
#section4 {padding-bottom: 70px; padding-top: 15px;}

.stateList p {font-size: 1.2em;margin-bottom: 30px;color: #ccc;}
.stateList p a {color: #555; text-decoration: none;}
.stateList p a:hover {color: #fff;}
.section-footer {width: 100%;color: #fff;padding: 15px;z-index: 300;background: #555;margin-top: 20px; overflow: hidden;}
.section-footer a {color: #fff;}
.section-footer a:hover {text-decoration: none; color: #ccc;}
.section-footer p {font-size: .8em!important; float: left;}
.section-footer img {float: right}
.searchRow {background: #fff;padding: 0px 10px; -webkit-box-shadow: 6px 6px 5px 0px rgba(69, 69, 69, 0.33);
    -moz-box-shadow:    6px 6px 5px 0px rgba(69, 69, 69, 0.33);
    box-shadow:         6px 6px 5px 0px rgba(69, 69, 69, 0.33);
    border-radius: 6px; margin: 30px 0 40px 0;  }
.spaced {margin: 15px 0;}
.searchRow .form-control {border: none; box-shadow: none;}
input.form-control.hasDatepicker {border: 1px solid #ccc; background: url("/images/teenet/input-cal-bg.png") no-repeat right top;}
input.tn-search {font-size: 1.2em; margin: 15px 0;}
textarea, input[type="text"], input[type="submit"] {-webkit-appearance: none;}
#register-modal .modal-header {overflow: hidden;}
#register-modal .modal-header button.btn {margin-left:15px;}
.group-margin-bottom {margin-bottom: 15px;}
.required:after {content:"*";color:#000;}
#feeModal .modal-header h4 {color: #25549f;}
#feeModal a.select-fee {border:1px solid #25549f; padding: 4px;font-size:  1.1em; display: inline-block; color: #fff; background: #25549f; }
#feeModal .row {margin:5px;border-bottom: 1px solid #ccc; padding-bottom: 6px;}
#feeModal .modal-body {max-height:430px; overflow: auto;}

h1.ok {font-size: 50px;}
#bookConfirmationModal h2.modalTitle {text-align: center;}
#confirmation p {font-size: 1em;}

a.select-fee:hover {color: #25549f!important; background: #fff!important; text-decoration:none}
.modalLink {margin: 10px 0;display: inline-block;}
#information {padding-right: 0!important;}

#search_form {width: 100%; max-width:  1110px;margin: 0 auto;}
a#datetimepickerLink {font-size: 1.2em; color: #fff; background:#9EA5AD; padding: 21px 10px;display: inline-block; text-decoration: none;}
.teenet-logo {position: fixed; top: 10px; left: 10px;z-index: 80; }
.teenet-logo img {margin-top: -20px;}
.teenet-logo h1 {font-size: 25px; color: #555; display: inline-block;margin-left: 10px; margin-top: 30px;}
.teenet-logo h1 span {color: #1E468C;}
.select-options {position: relative; width: 100%; max-width:  1110px;margin: 30px auto 10px auto; text-align: left;}
.ozmap {width: 320px;float: right; position: relative; top: -30px;}
.ozmap2 {position:relative;max-width:520px;width:96%; margin: 0 2%;margin: 0 auto;}
.ozmap2 img {width: 100%;}
.map-marker {background-color: #314A57; color:#fff; border-radius: 14px;height: 28px; width: 28px; position:absolute; padding: 2px; text-align: center;}
.map-marker:hover {background:#BCC4C8;cursor:pointer; }
.map-icon {background: url("/images/teenet/teenet-club.png") no-repeat; height: 32px; width: 22px; display:inline-block;position: relative;top:9px;}
.map-marker2 {background-color: #314A57; color:#fff; border-radius: 14px;height: 28px; width: 42px; position:absolute; padding: 2px; text-align: center;}
.map-marker2:hover {background:#BCC4C8;cursor:pointer; }
.map-btn {height: 40px; width: 45px; background: url("/images/teenet/oz-map-button.png") no-repeat top left; display: inline-block;float: left; }
.counterWA {top: 45%; left: 20%;}
.counterNT {top: 30%; left: 47.5%}
.counterQLD {top: 30%; left: 75%;}
.counterNSW {top: 55%; left: 75%;}
.counterVIC {top: 75%; left: 75%;}
.counterTAS {top: 92.5%; left: 80%}
.counterSA {top: 51%; left: 50%;}
.counterACT {top:62.5%; left:85%;}
.stateList {width: 82%; max-width: 1110px; margin: 0 9%;}



#stateMap{
    height: 450px;
}
.stateClubList {text-align: left;}
.stateClubList ul li a {color: #fff;}
.back-btn {
  width: 100%; margin: 0 auto 10px auto;

}

#section2 .fp-controlArrow.fp-prev {border-color: transparent #2e6da4 transparent transparent;}
#section2 .fp-controlArrow.fp-next  {border-color: transparent transparent transparent #2e6da4;}
#section4 .intro {max-width: 1100px; margin: 2% auto;width: 96%;}
#section4 .intro p {margin: 0 2%;width: 96%; font-size: 13px;max-width: 1100px;}
.terms-conditions p {font-size: 13px;}
.terms-conditions ul li {font-size: 13px;}
.terms-conditions strong {margin-top: 10px;display: inline-block;}
.terms-conditions ul {width:96%;margin:8px 2% 8px 40px; list-style: disc; list-style-type: disc;}
.back-btn a {box-shadow: 3px 3px 3px 0px rgba(69, 69, 69, 0.4);}
.well.terms-conditions h1 {font-size: 1.2em;}
.well.terms-conditions {max-height: 130px; overflow: scroll;}
.sign-up a {padding: 4px 7px;border-radius: 4px; border: 1px #FFF solid;text-decoration: none; color: #fff;}
.page-down-next {margin: 10px auto;font-size:6em;width:230px;text-align: center;}
.input-help {font-size: .8em;color:#444;margin-top: 8px;}
.page-down-next a {color: #fff!important; margin-bottom: 0;cursor:pointer; }
.page-down-next a:hover, .page-down-next a:active,.sign-up a:hover, .sign-up a:active, {text-decoration: none; color: #75B6E3;}
.page-down-next a:visited, .sign-up a:visited {color: #fff;}

a.button-link, .button-link a {color: #fff;border: 1px solid #fff;padding: 8px 10px;border-radius:3px; text-decoration:  none; font-size:1.2em;background: #B81F44;}
a.button-link:hover {text-decoration: none; background: #fff; color: #B81F44;}
h3 a:hover, h3 a:active {text-decoration: none; color: #fff;border: none;}
.row.otherHeader {background:#2e6da4; color: #fff; text-align: center;margin-top: 5px; margin-bottom: 5px;height: auto!important;padding-bottom: 10px; }
.otherHeader span {margin-left: 5px;}
.info-row {height: 60px; display: block;}
.day-controls {
    position: absolute;
    right:-30px;
    top: 105px;
    width: 64%;
    z-index: 100;
    padding-top: 8px;
}
.prev-left {width:50%;float: left;}
.next-right {width:50%;float: right;}
.tooltip-inner {white-space:nowrap;text-align: left;}
.redirecting-notice {text-align: center;}
.dateCell {text-align: center;border: 1px solid #fff;}

/*menu*/
a.social-links img {height: 27px; width: 27px; display: inline-block;}
.navigation  {text-align: right; margin-top: 15px;}
#menu li {
    display:inline-block;
    margin: 0px 5px;
    color: #000;
    background:#fff;
    background: rgba(255,255,255, 0.5);

}
#menu li.active{
    color:#1E468C;
}
#menu li a{
    text-decoration:none;
    color: #000;
}
#menu li.active a:hover, #menu li a:hover{
    color: #1E468C;
}
#menu li:hover{
    color: #1E468C;
}
#menu li a,
#menu li.active a{
    padding: 4px 4px;
    display:block;
}
#menu li.active a{
    color: #1E468C;
}

.twitter-share-button{
	position: fixed;
	z-index: 99;
	right: 149px;
	top: 9px;
}

.green {
    color:#33CC33;
}
/*times*/
.timeSlot a {color: #fff !important; display: block; height: 100%; width: 100%;padding-top: 15px;}

.timeSlot a:hover, .timeSlot a:active, .timeSlot a:visited {text-decoration: none;color:#f2f2f2;background:#337ab7;   }
.timeSlot.hasTimes:hover {color:#306ED3!important;}
.col-lg-1.timeSlot {padding: 0!important;}
/*animate*/

.special-cell-star{
    position: absolute!important;
    top: 0!important;
    right:0!important;
    margin-top:5px!important;
    margin-right:5px!important;
}

.glyphicon-star{
    color:red;
}


.pager {
    margin: 5px 0!important;
}
.page-number.clickable {padding: 3px 6px; border: 1px solid #ccc; margin:1px;}
.page-number.clickable:hover {background: #337ab7; color: #fff;}
.page-number.active {background:#efefef;}

.loading-modal {
    z-index:    1000;
    margin: 0 auto;
    height:     200px;
    width:      75%;
}

.circular
{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    margin-left: 10px;
}

.animated {
    -webkit-animation-duration: 1.5s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

#dressCode {
    border: 1px #e0da89 solid;
    border-radius: 3px;
    padding:3px;
    margin-top:5px;
    background:#fef891;
}

#informationAddress #address {margin: 8px 0;}
@-webkit-keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    40%, 43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    40%, 43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }

    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }

    90% {
        -webkit-transform: translate3d(0,-4px,0);
        transform: translate3d(0,-4px,0);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
}

/*bootstrap lg*/
@media (max-width: 1199px) {
    #section1 .day-controls {
        width: 74%;
        top: 108px
    }
    .fp-controlArrow.fp-prev {border-color: transparent #2e6da4 transparent transparent;
        border-width: 19.25px 17px 19.25px 0;
        left: 15px;
        width: 0;}
    .fp-controlArrow.fp-next {
        border-color: transparent transparent transparent #2e6da4;
        border-width: 19.25px 0 19.25px 17px;
        right: 15px;
    }
    .course-find, .location-link {padding-left: 8px;}
}

/* bootstrap lrg*/
@media (max-width: 1200px) {
    #clubListDiv {width: 94%; margin: 0 3% 0 0;}
    #clubListHeader .fixed-element, #clubListHeader {width: 94%;}

}

/*bootstrap md*/
@media (max-width: 992px) {
   #clubListDiv.stateResults .day-controls {
        width: 74%;
        top: 108px;
        right: -10px;

    }

    .day-controls {
        width: 74%;
        top: 10px;
        right: -10px;

    }
    .top-nav {margin-bottom: 10px;}

    .col-xs-12.searchRow {margin: 15px 2% 20px; width:96%;}
    .select-options {width: 96%;padding: 0 2%;}
    .searchRow .form-control {border: 1px solid #ccc;}
    input#datetimepickerText  {margin-top: 0}
    a#datetimepickerLink {
        border-radius: 4px;
        font-size:14px;
        padding: 6px 10px;  }
    .searchRow .btn {margin-top: 0;}
    a#datetimepickerLink {font-size: 1.1em;}

}

@media (min-width: 768px) {
    .searchRow .form-control { margin-bottom: 15px; !important;}
}

/*bootstrap sm*/
@media (max-width: 768px) {
    .day-controls {
        width: 74%;
        top: 108px;
        right: -20px;

    }
    #clubListDiv.stateResults {  margin-left: 0 !important;}
    #register-modal .modal-header .btn {padding: 6px 6px;}

    #section1 .day-controls {
        width: 74%;
        top: 108px
    }

    .searchRow .form-control { margin-bottom: 5px; }

    .searchRow {padding-bottom: 5px;}

}
/*bootstrap xs landscape*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 768px)
and (orientation : landscape) {
    .day-controls {
        width: 60%;
        top: 130px!important;
        right: -20px;

    }
}

/* ipads tablets*/
@media (max-width: 768px) {

    #section1 #clubListHeader {
        margin-top: -86px;
    }

    #section1 #clubList {
        margin-top: 64px;
    }

    /*toggle menu*/
    .navigation {
        position: absolute;
        right: 5px;
    }

    #toggle {
        display: block;
        width: 28px;
        height: 30px;
        margin: 30px 10px;
        float: right;
    }

    #toggle span:after,
    #toggle span:before {
        content: "";
        position: absolute;
        left: 0;
        top: -9px;
    }

    #toggle span:after {
        top: 9px;
    }

    #toggle span {
        position: relative;
        display: block;
    }

    #toggle span,
    #toggle span:after,
    #toggle span:before {
        width: 100%;
        height: 5px;
        background-color: #2e6da4;
        transition: all 0.3s;
        backface-visibility: hidden;
        border-radius: 2px;
    }

    /* on activation */
    #toggle.on span {
        background-color: transparent;
    }

    #toggle.on span:before {
        transform: rotate(45deg) translate(5px, 5px);
    }

    #toggle.on span:after {
        transform: rotate(-45deg) translate(7px, -8px);
    }

    #toggle.on + #menu {
        opacity: 1;
        visibility: visible;
    }

    /* menu appearance*/
    a.social-links img {
        margin-top: 18px;
    }

    #menu {
        position: absolute;
        color: #999;
        width: 300px;
        padding: 10px;
        text-align: center;
        border-radius: 4px;
        background: #25549f;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
        z-index: 400;
        /* just for this demo */
        opacity: 0;
        visibility: hidden;
        transition: opacity .4s;
        float: right;
        top: 69px;
        right: 0px;
    }

    #menu:after {
        position: absolute;
        top: -15px;
        right: 10px;
        content: "";
        display: block;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 20px solid #25549f;
    }

    ul, li, li a {
        list-style: none;
        display: block;
        margin: 0;
        padding: 0;
    }

    #menu li a {
        padding: 5px;
        color: #fff;
        text-decoration: none;
        transition: all .2s;
        font-size: 1.4em;

    }

    #menu li a:hover,
    #menu li a:focus {

        color: #c2c2c2;
    }

    #menu li {
        display: block;
        margin: 0px 5px;
        color: #fff;
        background: #25549f;

    }

    #menu li.active {
        color: #fff;
    }

    #menu li.active a:hover, #menu li a:hover {
        color: #c2c2c2;
    }

    #menu li:hover {
        color: #c2c2c2;
    }

    #menu li a,
    #menu li.active a {
        padding: 4px 4px;
        display: block;
    }

    #menu li.active a {
        color: #fff !important;
    }

    .intro p {
        font-size: 1.2em;
    }

    .terms-conditions p {
        font-size: 13px;
    }

    #section0 .fp-tableCell, {
        width: 98%;
        margin: 0 1%;
    }

}

/* ipad landscape*/
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
    .ozmap {
        top: 0px;
    }

    #section0 .fp-tableCell {
        width: 96%;
        margin: 0 2%;
        display: block;
    }

    #section0 .tag-line {
        display: none;
    }

    .day-controls {
        width: 66% !important;
        top: 108px
    }

    #section1 #clubList {
        display: inline-block;
        /*margin-top: 109px;*/

    }
}

/* Extra small devices and phones*/

/*phone landscape*/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px) {
    .stateResults #clubListHeader {
        margin-top: -62px;
    }
    #section1 #clubList {
        margin-top: 108px;
    }

    #clubListDiv.stateResults .day-controls {
        top: 130px;
        width: 60%;
    }

    .hidden-phone {
        display: none;
    }

    #section1 .day-controls {
        top: 148px !important;
    }

}
/*phone*/
@media (max-width: 480px) {
    #section0 .section {
        padding-top: 90px !important;
    }

    p {
        font-size: 1em;
    }

    .intro p {
        width: 95%;
        font-size: 1em;
    }

    .hidden-phone {
        display: none;
    }

    #section0 h1 {
        font-size: 4em;
    }

    input.tn-search {
        margin-bottom: 10px;
        font-size: 1em;
    }

    .ozmap {
        top: 15px;
    }

    .page-down-next {
        font-size: 4em;
    }

    .orgDistance {
        display: none;
    }

    .col-xs-7.date-select .searchRow .col-xs-12 {
        padding: 0;
    }

    .col-xs-3.dateCell {
        font-size: .9em;
        padding-left: 5px;
        padding-right: 5px;
    }

    .nearby-clubs {
        text-align: center;
        position: relative;
        z-index: 100;
    }

    #clubListDiv.stateResults .day-controls {
        top: 130px;
        width: 68%;
        right: -20px;
    }

    #section1 .day-controls {
        top: 148px;
        width: 68%;
        right: -20px;
    }

    .col-xs-12.searchRow {
        padding-left: 0;
        padding-right: 0;
    }

    .searchRow .col-xs-5 {
        padding-left: 0;
    }

    #section2.fp-section,
    #section2 .fp-tableCell {
        height: auto !important;
        min-height: 100%;
        vertical-align: top;
    }

    #clubListDiv {
        width: 92%;
    }

    #clubList .col-xs-6 {
        padding-top: 4px;
    }

    #clubListDiv.stateResults {
        margin-left: 0 !important;
    }

    .select-options {
        margin-top: 0px;
    }

    #section0 {
        padding-top: 80px !important;
    }

    .stateClubList {
        text-align: center;
    }

    #feeModal a.select-fee {
        margin-top: 5px;
    }

    .fp-controlArrow {
        top: 132px;
    }

    #section4 ul {
        list-style: disc !important;
        margin-left: 0px;
    }

    #section4 ul, #section4 li {
        list-style: disc !important;
    }

    #register-modal .modal-header .btn-default {
        margin-top: 10px;
    }

    #clubListHeader .fixed-element, #clubListHeader {
        width: 92%;
    }

    #section1 #clubList {
        margin-top: 108px;
    }

    .map-marker2 {
        height: 21px;
        width: 38px;
        position: absolute;
        padding: 2px;
        font-size: .9em;
    }
}

/*Loading SVG*/

.loading-modal ul {
    position: absolute;
    left: 50%;
    top: 296px;
    transform: rotate(45deg) translate(-50%, -50%);
}

.loading-modal li {
    list-style-type: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 20px;
    height: 20px;
    background: #2e6da4;
    border-radius: 50%;
}

#a {
    animation: a 1s ease-in-out infinite;
    top: -35px;
    left: -35px;
}

#b {
    animation: b 1s ease-in-out infinite;
    top: -35px;
    left: 0px;
}

#c {
    animation: c 1s ease-in-out infinite;
    top: -35px;
    left: 35px;
}

#d {
    animation: d 1s ease-in-out infinite;
    top: 0px;
    left: -35px;
}

#e {
    animation: e 1s ease-in-out infinite;
    top: 0px;
    left: 0px;
}

#f {
    animation: f 1s ease-in-out infinite;
    top: 0px;
    left: 35px;
}

#g {
    animation: g 1s ease-in-out infinite;
    top: 35px;
    left: -35px;
}

#h {
    animation: h 1s ease-in-out infinite;
    top: 35px;
    left: 0px;
}

#i {
    animation: i 1s ease-in-out infinite;
    top: 35px;
    left: 35px;
}

@keyframes a {
    50% {
        top: 0px;
        left: -35px;
    }
    100% {
        top: 0px;
        left: -35px;
    }
}

@keyframes b {
    50% {
        top: -35px;
        left: -35px;
    }
    100% {
        top: -35px;
        left: -35px;
    }
}

@keyframes c {
    50% {
        top: -35px;
        left: 0px;
    }
    100% {
        top: -35px;
        left: 0px;
    }
}

@keyframes d {
    50% {
        top: 35px;
        left: -35px;
    }
    100% {
        top: 35px;
        left: -35px;
    }
}

@keyframes f {
    50% {
        top: -35px;
        left: 35px;
    }
    100% {
        top: -35px;
        left: 35px;
    }
}

@keyframes g {
    50% {
        top: 35px;
        left: 0px;
    }
    100% {
        top: 35px;
        left: 0px;
    }
}

@keyframes h {
    50% {
        top: 35px;
        left: 35px;
    }
    100% {
        top: 35px;
        left: 35px;
    }
}

@keyframes i {
    50% {
        top: 0px;
        left: 35px;
    }
    100% {
        top: 0px;
        left: 35px;
    }
}