/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color:#5d5d5d;
}


h2{
    font: normal normal bold 2.1em avenir-lt-w01_85-heavy1475544, sans-serif;
    text-align:center;
    color: #000;
    font-weight:bold !important;
}
h3{
    font: normal normal bold 1.4em avenir-lt-w01_85-heavy1475544, sans-serif;
    text-align:center;
    color: #000;
    font-weight:bold;
}

h4{
    font: bold 1.3rem avenir-lt-w01_85-heavy1475544, sans-serif;
    text-align:center;
    color: #000;
    font-weight:bold;
}

html {
    font-size: 1em;
    line-height:1.5;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
body{
	margin-top:7em;
	background:#f9f9f9;
	padding:1em 0 2em;
	font-family: "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media all and (max-width: 860px) {
body{padding-bottom:0;}
}


/*** Navigation ***/

nav{
	background:rgba(255,255,255,.98);
	border-bottom:solid 1px #ebebeb;
	width:100%;
	position:fixed;
	top:0;
	z-index:999999;
	
	font-size:.875em; /*14px*/
	
	box-shadow:0 .33em 0 -0.165px rgba(255, 255, 255, .25);
}

nav a{
	text-decoration:none;
	color:#bf3639; /* Custom colour */
}

a.logo{
	display:block;
	width:200px;
	height:4.5em;
	float:left;
}

nav ol{
	display:display;
	float:left;
	padding-left:0;
	margin:0;
}

ol.secondary{
	margin:0 2em;
	text-transform:uppercase;
}

nav ol.tertiary{float:right;}

	nav li{
		display:inline;
	}

		ol a{
			display:block;
			float:left;
			padding:1.714em 0;
			text-align:center;
		}
	
		ol.primary a, ol.tertiary a{
			width:5.143em;			
			text-indent:-999999px;
		}
		
		ol.primary a{
			opacity:.5;
		}
		
		ol.secondary a{padding:1.714em 2em;}
			
			ol.primary a.monitor{background:#dedede url(../img/chart.svg) center center no-repeat;}
			
			ol.primary a.manage{background:#dedede url(../img/wrench.svg) center center no-repeat;}
			
			ol.primary a.tools{background:#dedede url(../img/toolbox.svg) center center no-repeat;}
			
			ol.tertiary a.settings{background:transparent url(../img/settings.svg) center center no-repeat;}

		ol.primary a:hover{opacity:.8;}
		
		ol.primary a.on{opacity:1;}
		
		ol.primary a.on:hover{cursor:default;}
		
		ol.secondary a:hover{color:#000;}
		
		@media all and (max-width: 860px) {
		ol.secondary a.hideTemp{display:none;}
		}
		

.col-1, .col-2, .col-3{padding:0 7%;}
	
@media all and (min-width: 860px) {
.col-2 > *{
	width:46%;
	margin:0 2%;
	float:left;
	overflow:hidden;
}
}

.col-3 > *{margin:0 2%;}

@media all and (min-width: 640px) {
.col-3 > *{
	width:29%;
	float:left;
	overflow:hidden;
}
}

.inButton{
	border:none;
	background:none;
	font-size:75%;
	font-style:italic;
	text-decoration:underline;
	color:#000;
}

.inButton:hover{}






	
	


	
	



/*** Typography ***/

h1{color:#bf3639; /* Custom colour */}

h1, h2{color:#000;}

h2{font-weight:normal;}

dd{margin-left:0;}

a{color:#0074D9;}



















/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

.hyphenate{
	-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;		
}

.state-positive{color:#0B9750;}

.state-negative{}

.state-neutral{}





.container{
    width:50%;
    overflow:auto;
    display:flex;
    flex-direction:column;
    margin:auto;
    background-color:white;
}


.logo{
    margin:auto;
    background:url("../FleetDefenseLogo.svg") no-repeat;
    width:100%;
    height:8rem;
    margin-top:6rem;

}



.text2{
    font-size:2rem;
    line-height:1.3em;
    text-shadow:rgba(0, 0, 0, 0.9) 0px 4px 5px;
    color:#fff;
}

.textblock{
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-content: space-between;
}

.textblockin{
    height:200px;
    margin: 0 2.5rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
}



.btn{
    background-color: rgba(68, 132, 206, 1);
    border: solid rgba(255, 255, 255, 1) 0px;
    border-radius:5px;
    height:60px;
    width:35%;
    position:relative;
    margin:0 auto;
    color:#fff;
    text-decoration:none;
    text-align:center;
    font-size:15px;
    margin-top:20px;
    margin-bottom:20px;
}

.btn:hover{
    background-color:#035fbb;
}



.background{
    width:100%;
    height:500px;
    margin:auto;
    background-size:contain;
    background-image:url("../background.jpeg");
    background-repeat:no-repeat;
    background-position:center;
}


/*Media Queries*/
@media (max-width: 768px){

    .container{
        width:70%;
    }
 
    .logo{
        height:100px;
        margin-top:10px;

    }
    .btn{
        width:50%;
    }

    h2{
        font-size:1.8rem;
    }
    h3{
        font-size:1.4rem;
    }
    .background{
        height:400px;
    }
}

@media (max-width: 481px){

    .container{
        width:80%;
    }
 
    .logo{
        height:60px;
        margin-top:5px;

    }
    .btn{
        width:60%;
    }

    h2{
        font-size:1.5rem;
    }
    h3{
        font-size:1.2rem;
    }
    .background{
        height:300px;
    }
}