/* Helvetica Neue is really a Mac thing, so use this as a fallback */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic);

body {
    padding-top: 90px;
    font-family: "Helvetica Neue", "Open Sans", Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Helvetica Neue", "Open Sans", Arial, sans-serif;
}


a {
	outline: none; /* remove nasty dotted line around focussed links */
}

a img { 
	border: none; /* removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
/* 	color: #2674c7; */
	text-decoration: none;
}

a:visited {
/* 	color: #2674c7; */
	text-decoration: none;
}

a:hover {
    color: #93c7ef;
    text-decoration: none;
}

a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
	background-color: inherit; /* stops grey box on IE */
	outline: none; /* remove nasty dotted line around focussed links */
}

/* ------------------ Bootstrap customisation ------------------------- */

.navbar {
    opacity: 0.95;
}

.navbar-brand {
    margin-left: 10px;
    padding-top: 12px;
    padding-right: 30px;
    height: 42px;
    width: 130px;
    background-image: url('/../img/archi-logo64.png'), url('/../img/archi-text-sm.png');
    background-size: 32px 32px, 79px 32px;
    background-position: 5px 9px, 42px 9px;
    background-repeat: no-repeat;
}


/* ------------------ Typography ------------------------- */

.mainheading {
    font-size: 28px;
	color: #464C66;
}

.subheading {
    font-size: 18px;
	color: #767a90;
    margin: auto;
}

.heading {
    font-size: 22px;
    color: #464C66;
}

.smallheading {
    font-size: 19px;
    color: #464C66;
}

.bodyText {
    font-size: 16px;
    font-weight: 200;
    line-height: 1.4;
}

.bodyTextSm {
    font-size: 14px;
    font-weight: 200;
    line-height: 1.4;
}

.image-caption {
    font-size: 15px;
    color: #555;
    font-style: italic;
}

/* ------------------ Other stuff ------------------------- */

.maindivider {
	background-color: #dddddd;
	margin-bottom: 40px;
	margin-top: 40px;
	height: 1px;
}

.img_shadow {
    box-shadow: 6px 6px 10px 0px rgba(100, 100, 100, 0.4);
}

.logo1 {
    width: 64px;
}

.logo2 {
    width: 125px;
    margin-left: 4px;
}

.download {
    font-size: 20px;
    font-weight: 400;
}

@media (min-width: 768px) {
    .download {
        font-size: 23px;
    }
}

.footnote {
    color:#777777;
    font-size:13px;
    font-weight: 200;
}

/* Add a div with this class to compensate for height of the nav bar when jumping to an #id */
.navbar_offset {
    display: block;
    position: relative;
    top: -40px;
    visibility: hidden;
}

/* Center a div in order to add image on left, text on right, all centered */
.center-div {
    text-align: center;
}
.center-div img {
/*     display: inline-block; */
    margin-left: auto;
    margin-right: auto;
}
.center-div p, .center-div div {
    display: inline-block;
}


/* ------------------ Buttons ------------------------- */

.downloadbutton {
    width: 180px;
}

.downloadbutton a {
    text-align: right;
    border-radius: 15px;
    background-color: #2e8ed3;
    color: white;
    display: block;    
    padding: 12px 20px 13px 20px;
    background-image: url('/img/download.png');
    background-repeat: no-repeat;
    background-position: 16px 12px;
    background-size: 25px 22px;
    font-size: 16px;
}

.downloadbutton a:hover {
    background-color: #297ab3;
}


/* ------------------ Featurettes ------------------------- */

.featurette-heading {
    font-weight: 300;
    line-height: 1;
    letter-spacing: -1px;
    font-weight: normal;
    font-size: 30px;
}

.featurette-byline {
    font-size: 20px;
}


/* ------------- Footer ----------------- */

#footer {
    margin-top: 50px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 15px;
    padding-bottom: 28px;
    background-color: #e5ecf1;
    color: #7f8e99;
}

#footer a {
    color: #7f8e99;
}

#footer a:hover {
    color: #93c7ef;
}

#footer .copyright {
    margin-top: 20px;
    font-size: 12px;
    text-align: center;
}


/* ------------------------------------- RESPONSIVE CSS -------------------------------------------------- */

@media (min-width: 768px) {

    /* Reduce the edge padding needed for mobile (15px by default) */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* ------------------ Typography increases in font size on bigger screen ------------------------- */
    .featurette-heading {
        font-size: 40px;
    }

    .featurette-byline {
        font-size: 25px;
    }
    
    .mainheading {
        font-size: 40px;
    }

    .subheading {
        font-size: 25px;
    }

    .heading {
        font-size: 30px;
    }

    .smallheading {
        font-size: 25px;
    }
    
    .bodyText {
        font-size: 20px;
        line-height: 1.4;
    }
    
    .bodyTextSm {
        font-size: 18px;
        line-height: 1.4;
    }

    /* ------------------ Other ------------------------- */

    .logo1 {
        width: 128px;
    }
    
    .logo2 {
        width: 250px;
        margin-left: 20px;
    }
    
}

/* Mobile phones with small height too small for fixed menu */
@media (max-height: 370px) {
    .navbar-fixed-top {
        position: absolute;
    }
}

@media (min-width: 992px) {
    .featurette-heading {
    
    }
}