@keyframes slidit {
    0% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
    }

    20% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
    }

    25% {
        transform: translateX(-20%);
        -webkit-transform: translateX(-20%);
        -moz-transform: translateX(-20%);
        -ms-transform: translateX(-20%);
    }

    45% {
        transform: translateX(-20%);
        -webkit-transform: translateX(-20%);
        -moz-transform: translateX(-20%);
        -ms-transform: translateX(-20%);
    }

    50% {
        transform: translateX(-40%);
        -webkit-transform: translateX(-40%);
        -moz-transform: translateX(-40%);
        -ms-transform: translateX(-40%);
    }

    70% {
        transform: translateX(-40%);
        -webkit-transform: translateX(-40%);
        -moz-transform: translateX(-40%);
        -ms-transform: translateX(-40%);
    }

    75% {
        transform: translateX(-60%);
        -webkit-transform: translateX(-60%);
        -moz-transform: translateX(-60%);
        -ms-transform: translateX(-60%);
    }

    95% {
        transform: translateX(-60%);
        -webkit-transform: translateX(-60%);
        -moz-transform: translateX(-60%);
        -ms-transform: translateX(-60%);
    }

    100% {
        transform: translateX(-80%);
        -webkit-transform: translateX(-80%);
        -moz-transform: translateX(-80%);
        -ms-transform: translateX(-80%);
    }
}
@-webkit-keyframes slidit { 
    0%	 { transform: translateX(0%);  
           -webkit-transform: translateX(0%);
           -moz-transform: translateX(0%);
           -ms-transform:  translateX(0%);
}
    20%  { transform: translateX(0%);
           -webkit-transform: translateX(0%);
           -moz-transform: translateX(0%);
           -ms-transform:  translateX(0%);
}
    25%  { transform: translateX(-20%); 
           -webkit-transform: translateX(-20%);
           -moz-transform: translateX(-20%);
           -ms-transform:  translateX(-20%);
}	
    45%  { transform: translateX(-20%);
           -webkit-transform: translateX(-20%);
           -moz-transform: translateX(-20%);
           -ms-transform:  translateX(-20%);
}	
    50%	 { transform: translateX(-40%);
              -webkit-transform: translateX(-40%);
           -moz-transform: translateX(-40%);
           -ms-transform:  translateX(-40%);
}
    70%  { transform: translateX(-40%);
           -webkit-transform: translateX(-40%);
           -moz-transform: translateX(-40%);
           -ms-transform:  translateX(-40%);
}
    75%	 { transform: translateX(-60%);
              -webkit-transform: translateX(-60%);
           -moz-transform: translateX(-60%);
           -ms-transform:  translateX(-60%);
}
    95%  { transform: translateX(-60%);
           -webkit-transform: translateX(-60%);
           -moz-transform: translateX(-60%);
           -ms-transform:  translateX(-60%);
}
    100% { transform: translateX(-80%);
           -webkit-transform: translateX(-80%);
           -moz-transform: translateX(-80%);
           -ms-transform:  translateX(-80%);
}
}
@-moz-keyframes slidit {
    0% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
    }

    20% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
    }

    25% {
        transform: translateX(-20%);
        -webkit-transform: translateX(-20%);
        -moz-transform: translateX(-20%);
        -ms-transform: translateX(-20%);
    }

    45% {
        transform: translateX(-20%);
        -webkit-transform: translateX(-20%);
        -moz-transform: translateX(-20%);
        -ms-transform: translateX(-20%);
    }

    50% {
        transform: translateX(-40%);
        -webkit-transform: translateX(-40%);
        -moz-transform: translateX(-40%);
        -ms-transform: translateX(-40%);
    }

    70% {
        transform: translateX(-40%);
        -webkit-transform: translateX(-40%);
        -moz-transform: translateX(-40%);
        -ms-transform: translateX(-40%);
    }

    75% {
        transform: translateX(-60%);
        -webkit-transform: translateX(-60%);
        -moz-transform: translateX(-60%);
        -ms-transform: translateX(-60%);
    }

    95% {
        transform: translateX(-60%);
        -webkit-transform: translateX(-60%);
        -moz-transform: translateX(-60%);
        -ms-transform: translateX(-60%);
    }

    100% {
        transform: translateX(-80%);
        -webkit-transform: translateX(-80%);
        -moz-transform: translateX(-80%);
        -ms-transform: translateX(-80%);
    }
}

@-ms-keyframes slidit {
    0% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
    }

    20% {
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
    }

    25% {
        transform: translateX(-20%);
        -webkit-transform: translateX(-20%);
        -moz-transform: translateX(-20%);
        -ms-transform: translateX(-20%);
    }

    45% {
        transform: translateX(-20%);
        -webkit-transform: translateX(-20%);
        -moz-transform: translateX(-20%);
        -ms-transform: translateX(-20%);
    }

    50% {
        transform: translateX(-40%);
        -webkit-transform: translateX(-40%);
        -moz-transform: translateX(-40%);
        -ms-transform: translateX(-40%);
    }

    70% {
        transform: translateX(-40%);
        -webkit-transform: translateX(-40%);
        -moz-transform: translateX(-40%);
        -ms-transform: translateX(-40%);
    }

    75% {
        transform: translateX(-60%);
        -webkit-transform: translateX(-60%);
        -moz-transform: translateX(-60%);
        -ms-transform: translateX(-60%);
    }

    95% {
        transform: translateX(-60%);
        -webkit-transform: translateX(-60%);
        -moz-transform: translateX(-60%);
        -ms-transform: translateX(-60%);
    }

    100% {
        transform: translateX(-80%);
        -webkit-transform: translateX(-80%);
        -moz-transform: translateX(-80%);
        -ms-transform: translateX(-80%);
    }
}
.index-header-div {
    background-color: rgba(0,0,255,.8);
    padding-left: 5px;
    float: left;
    display: inline-flexbox;
    width: 15%;
    height: 3.5rem;
}
.index-header-div a {
    font-family: 'Exo', sans-serif;
    font-weight: bolder;
    font-size: 3rem;
    color: white;
    text-decoration: none;
}
.index-body-div {
    margin-left:  5%;
    margin-right: 5%;
    font-family: 'Montserrat', sans-serif;
}
#index-nav-div ul, #index-nav-div li, #index-nav-div a {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    line-height: 1;
    font-family: 'Montserrat', sans-serif;
    font-size: .8rem;
}
#index-nav-div {
    background-color: rgba(0,0,255,.8);
    display: inline-block;
    width: 80%; 
    height: 3.5rem;
}
#index-nav-div ul {
    overflow: hidden;
    display: inline-flexbox;
    padding:  2px 8px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

#index-nav-div li {
    float: left;
    margin:  0 2px 0 2px;
    width: 80px;
    padding: 5px 12px 5px 12px;
    border-top: 1px,solid,#36b0b6;
    border-bottom: 1px,solid,#2a8a8f;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
     -o-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow:  0 5px 10px #133e40;
    -webkit-box-shadow:  0 5px 10px #133e40;
    box-shadow:  0 3px 8px #133e40;
    background: -moz-linear-gradient(top, rgba(54,176,180,0),rgba(54,176,180,1)); 
    background: -webkit-gradient(top, rgba(54,176,180,0),rgba(54,176,180,1)); 
    background: -webkit-linear-gradient(top, rgba(54,176,180,0),rgba(54,176,180,1)); 
    background: -o-linear-gradient(top, rgba(54,176,180,0),rgba(54,176,180,1)); 
    background: -ms-linear-gradient(top, rgba(54,176,180,0),rgba(54,176,180,1));
    background: linear-gradient(top, rgba(54,176,180,0),rgba(54,176,180,1)); 
}
#index-nav-div li a {
    text-decoration: none;
    display: inline-block;
    padding: 4px 15px 6px 15px;
    color: #ffffff;
    border: none;
}
#index-nav-div a {
    color: #fff;
}
#index-nav-div li.active {
    -moz-box-shadow: inset 0 5px 10px #133e40;
    -webkit-box-shadow: inset 0 5px 10px #133e40;
    box-shadow: inset 0 5px 10px #133e40;
}
#index-nav-div li.active a {
    color: black;
    cursor: default;
}
.index-slider-div{
    max-width: 75%;
    overflow: hidden;
    float:  left;
}
figure {
    margin: 0;
}
figure.slider{
    position: relative;
	width: 500%;
	font-size: 0;
	animation: 40s slidit infinite;
    -webkit-animation: 40s slidit infinite;
    -moz-animation: 40s slidit infinite;
    -o-animation: 40s slidit infinite;
    -ms-animation: 40s slidit infinite;
}
figure.slider figure {
    width: 20%; 
	height: auto;
	display: inline-block;
	position: inherit;
}
figure.slider img {
	width: 100%;
	height: auto;
}
figure.slider figure figcaption {
	position: absolute;
    text-align: center;
	bottom: 10%;
    left:  20%;
    line-height: 200%;
    height:  25%;
	background: rgba(0,0,0,.2);
	color: #fff;
	width: 60%;
    font-family: 'Montserrat', sans-serif;
	font-size: 1.5rem;
	padding: .5rem;
    border-radius: .5rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    -ms-border-radius: .5rem;
     -o-border-radius: .5rem;
}
section, .section-header, .section-header-about, .section-header-contact, .section-header-services, .section-footer, .italicise a {
    font-size: .75rem;
}
.section-header, .section-header-about, .section-header-contact, .section-header-services {
    color: #067bbf;
}
section {
    border: solid;
    border-width: 1px;
    border-color: black;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-readius: 5px;
    -o-border-radius: 5px;
    box-shadow:  5px 2px 10px rgba(0,0,255,.5);
    -webkit-box-shadow: 5px 2px 10px rgba(0,0,255,.5);
    -moz-box-shadow:  5px 2px 10px rgba(0,0,255,.5);
    -o-box-shadow: 5px 2px 10px rgba(0,0,255,.5);
    -ms-box-shadow: 5px 2px 10px rgba(0,0,255,.5);
    display:  block;
    width:  73%;
    padding-left: 1%;
    padding-right:  1%;
    margin-top: 2%;
    margin-bottom: 1%;
    float:  left;
}
aside {
    font-size: .8rem;
    border: solid;
    border-width: 1px;
    border-color: black;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius:  5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    box-shadow:  3px 2px 5px rgba(0,0,255,.5);
    -webkit-box-shadow:   3px 2px 5px rgba(0,0,255,.5);
    -moz-box-shadow:   3px 2px 5px rgba(0,0,255,.5);
    -ms-box-shadow:  3px 2px 5px rgba(0,0,255,.5);
    -o-box-shadow:  3px 2px 5px rgba(0,0,255,.5);
    display:  flexbox;
    float:  right;
    margin-top: 2%;
    margin-left: 2px;
    padding-left: .5%;
    margin-right: 10%;
    padding-right: .5%;
    width: 12%;
}

footer.page-footer {
    background-color: #808080;
    text-decoration: none;
    font-family:  'Montserrat', sans-serif;
    color: white;
    width: 90%;
    height: 60px;
    margin-top:  20px;
    position:  relative;
    clear:  both;
}
footer.page-footer span {
    display: inline-block;
    padding-left: 2.5%;
    width: 22%;
    color: white;
}
.banner {
    width: 95%;
    height:  auto;
}
.italicise span {
    font-style: italic;
}
.italicise a {
    text-decoration: none;
    font-size: .85rem;
}
#skypelogo {
    max-height: 20px;
    width:  auto;
}
h2 {
    font-size: .9rem;
    margin-left: 1%;
}
h2 span {
    vertical-align: super;
    font-size: .45rem;
}
.software-man {
    float: right;
}
.software-man-ad figcaption {
    font-size: .65rem;
}
/*Media adjustments*/
/*Meant for 'medium' screens like tablets, drop the navigation below the page header, so the alignment isn't messed up and the navigation does not start covering the AJSS text*/
@media only screen and (max-width: 1175px) {
        figure.slider figure figcaption {
        font-size:  1rem;
    }
}

@media only screen and (max-width: 900px) {
    .index-header-div {
        float:  none;
        display: inline-block;
    }
    #index-nav-div {
        background-color: rgba(0,0,255,.8);
        display: normal;
        padding-left: 5px;
        padding-bottom: 0%;
    }
    section, .section-header, .section-header-about, .section-header-contact, .section-header-services, .section-footer {
        font-size: .85rem;
        width:  97%;
    }
    h2 {
        font-size: .8rem;
    }
    #portfolio h2 span {
        font-size: .5rem;
    }
    .index-slider-div {
        max-width: 100%;
    }
    figure.slider figure figcaption {
        font-size:  .95rem;
    }
    footer.page-footer, #index-nav-div, .index-header-div, .index-slider-div, .banner {
        width:  100%;
    }
    footer.page-footer {
        font-size: .75rem;
        height:  50px;
    }
    aside {
        display:  none;
    }
    .italicise a {
        font-size:  .75rem;
}
}
@media only screen and (max-width: 580px) {

    .index-header-div {
        float:  none;
        display: block;
    }
    #index-nav-div {
        background-color: rgba(0,0,255,.8);
        display: normal;
        padding-left: 5px;
        padding-bottom: 0%;
        height: auto;
    }
    figure.slider figure figcaption {
        font-size:  .6rem;
    }
    .index-slider-div {
        max-width: 100%;
    }
    section, .section-header, .section-header-about, .section-header-contact, .section-header-services, .section-footer {
        font-size: .7rem;
        width:  97%;
    }
    h2 {
        font-size: .75rem;
    }
    #portfolio h2 span {
        font-size: .3rem;
    }
    fi
    footer.page-footer, .index-header-div, #index-nav-div, .index-slider-div, .banner {
        width:  100%;
    }
    footer.page-footer {
        font-size: .7rem;
        height: 40px;
    }
    aside {
        display:  none;
    }
    .italicise a {
        font-size:  .8rem;
    }
    footer.page-footer span {
        width: 20%;
    }
    .software-man {
    float: none;
    width: 90%;
    }
}
@media only screen and (max-width: 375px) {
        figure.slider figure figcaption {
        font-size:  .5rem;
    }
}
/*End of media statements*/