/* ==================================================
   CSS Imports
================================================== */

@import url("reset.css");
@import url("columns.css");
@import url("typography.css");
@import url("menu.css");
@import url("animate.css");

/* ==================================================
   Google Fonts
================================================== */

@import url("https://fonts.googleapis.com/css?family=Fira+Sans:300,300italic,400,400italic,500,500italic,700,700italic");
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro:300,300italic,400,400italic,500,500italic,700,700italic");

/* ==================================================
   Global Styles
================================================== */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    overflow: auto;

    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: "Fira Sans", Arial, Verdana, Helvetica, sans-serif;
    font-size: 17px;
    color: #000;
    background: #02429b;
    line-height: 28px;
    font-weight: 300;
    z-index: auto;

    text-rendering: optimizeLegibility;
    vertical-align: baseline;
}

::selection {
    background: #1982d2;
    color: #fff;
}

::-moz-selection {
    background: #1982d2;
    color: #fff;
}

a {
    color: #02429b;
    text-decoration: none;
    font-weight: bold;
}

a:visited {
    color: #f34545;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #02429b;
}

/* ==================================================
   Tables
================================================== */

#collaborators td {
    vertical-align: top;
    padding-top: 30px;
    padding-bottom: 30px;

}

#collaborators td.left {
    vertical-align: middle;
    text-align: center;
    padding-right: 20px;
}

#screenshots td {
    padding: 30px;
}

#screenshots img {
    border: 5px solid #555;
}

/* ==================================================
   Images
================================================== */

img {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
}

img.hb {
    float: bottom;
    padding-top: 7px;
}

img.imgright {
    float: right;
    width: 100%;
    max-width: 300px;
    margin: 0 0 20px 20px;
}

img.imgleft {
    float: left;
    width: 100%;
    max-width: 300px;
    margin: 0 20px 20px 0;
}

/* ==================================================
   Colours
================================================== */

.bg1 {
    background: url("/images/pexels-elia-clerici-912110-orig.jpg") no-repeat scroll top center;
    background-size: cover;
}

.bg2 {
    background: #FFF;
}

.bg3 {
    background: #02429b;
}

.bg4 {
    background: #FFF;
}


/* ==================================================
   Layout Styles
================================================== */

.container {
    width: 100%;
    padding: 0 30px;
    min-width: 280px;
    line-height: 26px;
}

.container .bodycontainer {
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
}

/* ==================================================
   Sticky Menu
================================================== */

.stickydiv {
    position: relative;
    z-index: 999;
    width: 100%;
}

.stickydiv.stuck {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

/* ==================================================
   Sections
================================================== */

#topcont {
    padding: 15px 0px 5px 0px;
    text-align: left;
}

#topcont #topleft {
    float: left;
}

#topcont #topleft h1 {
    font-size: 46px;
    /*line-height: 46px;*/
    margin: 0;
    font-weight: 600;
}

#topcont #topleft h1 a {
    color: #02429b;
}

#topcont #topleft h1 a span {
    color: #02429b;
    margin: 0 5px 0 0;
}

#topcont #topright {
    float: right;
}

#topcont #topright #socialmedia ul {
    float: right;
    margin: 6px 0 0 0;
}

#topcont #topright #socialmedia ul li {
    display: block;
    float: left;
    list-style-type: none;
    padding: 0;
}

#topcont #topright #socialmedia ul li a {
    float: left;
    font-size: 22px;
    line-height: 40px;
    min-width: 40px;
    margin: 0 0 0 6px;
    text-align: center;
    color: #FFF;
    background: #CCC;

    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

#topcont #topright #socialmedia ul li a:hover {
    background: #1982d2;
}

#menucont {
    padding: 0;
}

#menucont p {
    margin: 0;
}

#gallerycont {
    padding: 70px 0;
    color: #FFF;
}

#gallerycont h1 {
    color: #FFF;
    font-size: 62px;
    font-weight: 600;
    letter-spacing: -2px;
    line-height: 62px;
    margin: 0 0 20px 0;
    max-width: 1000px;
    text-shadow: 2px 2px 5px #223352;
    width: 100%;
}

#gallerycont h2 {
    color: #FFF;
    font-size: 48px;
    font-weight: 400;
    letter-spacing: -2px;
    line-height: 48px;
    margin: 0 0 20px 0;
    max-width: 700px;
    text-shadow: 2px 2px 5px #223352;
    width: 100%;
}

#gallerycont p {
    background-color: rgba(22, 33, 52, 0.6);
    border-radius: 10px;
    box-shadow: 2px 2px 3px #223352;
    color: #FFF;
    font-size: 20px;
    margin: 0;
    padding: 7px;
    text-shadow: 2px 2px 3px #223352;
}

#maincont {
    padding: 60px 0;
}

#maincont #mainleft {
    float: left;
    width: 70%;
    padding-right: 25px;
}

#maincont #mainright {
    float: left;
    width: 30%;
    padding-left: 25px;
}

#footercont {
    padding: 40px 0;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.footer.left {
    width: 50%;
    alignment: left;
    text-align: left;
}

.footer.right {
    width: 50%;
    alignment: right;
    text-align: right;
}

#footercont a {
    color: #FFF;
}

#footercont p {
    margin: 0;
}

/* ==================================================
   Responsive Media Queries - Tablets
================================================== */

@media screen and (max-width: 768px) {

    .bg1 {
        background: url("/images/pexels-elia-clerici-912110-large.jpg") no-repeat scroll top center;
        background-size: cover;
    }

    img.imgright {
        float: none;
        width: 100%;
        max-width: 300px;
        margin: 0 0 20px 0;
    }

    img.imgleft {
        float: none;
        width: 100%;
        max-width: 300px;
        margin: 0 0 20px 0;
    }

    #topcont {
        padding: 15px 0px 5px 0px;
        text-align: left;
    }

    #topcont #topleft {
        float: left;
        width: 100%;
    }

    #topcont #topright {
        float: left;
        width: 100%;
    }

    #topcont #topright #socialmedia ul {
        float: left;
        margin: 15px 0 0 0;
    }

    #topcont #topright #socialmedia ul li a {
        margin: 0 6px 0 0;
    }

    #gallerycont {
        padding: 55px 0;
    }

    #gallerycont h1 {
        font-size: 42px;
        font-weight: 400;
        letter-spacing: -1px;
        line-height: 42px;
        max-width: 500px;
    }

    #gallerycont h2 {
        font-size: 28px;
        font-weight: 350;
        letter-spacing: -1px;
        line-height: 28px;
        max-width: 300px;
    }

    #gallerycont p {
        font-size: 18px;
        padding: 5px;
    }

    #maincont {

    }

    #maincont #mainleft {
        width: 100%;
        padding-right: 0;
    }

    #maincont #mainright {
        width: 100%;
        padding-left: 0;
    }

    #footercont {
        text-align: left;
    }

}

/* ==================================================
   Responsive Media Queries - Mobiles
================================================== */

@media screen and (max-width: 480px) {
    .bg1 {
        background: url("/images/pexels-elia-clerici-912110-small.jpg") no-repeat scroll top center;
        background-size: cover;
    }

    #gallerycont {
        padding: 30px 0;
    }

    #gallerycont h1 {
        font-size: 30px;
        font-weight: 300;
        letter-spacing: -1px;
        line-height: 30px;
        max-width: 300px;
    }

    #gallerycont h2 {
        font-size: 24px;
        font-weight: 250;
        letter-spacing: -1px;
        line-height: 24px;
        max-width: 300px;
    }

    #topcont {
        padding: 15px 0px 5px 0px;
        text-align: left;
    }

}