/* ============================================================
  RESET - http://meyerweb.com/eric/tools/css/reset/
============================================================ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* ============================================================
  BOX SIZING & CLEARFIX
============================================================ */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* ============================================================
  PRIMARY STRUCTURE
============================================================ */


main {
  display: block;
  background-color: #f3f3f3;
}

.container {
  width: 100%;
  max-width: 1110px;
  top:20px;
  margin: 0 auto;
  padding: 0 20px;
  background-color:#;
  text-align:center;
    padding: 40px 0;
	  min-height:250px;
	   clear:both;
	   height:auto;



}





.container2 {
  width: 100%;
  text-align:center;
	  min-height:250px;
	   clear:both;
	   height:auto;



}
.textcontainer {
  width: 85%;
  max-width: 1000px;
  margin: 0 auto;
  text-align:center;
    padding: 0px 0;
	  min-height:450px;
	   clear:both;
	   height:auto;
	   z-index:-500;



}

.menu {
    width: 60%;
    float: left;
    padding: 15px;
}
.main2 {
    width: 40%;
    float: left;
    padding: 15px;
}

article {
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  column-width: 150px;
  text-align:left;
}


.textcontainer2 {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  text-align:center;
    padding: 20px 0;
	  min-height:450px;
	   clear:both;
	   height:auto;



}

/* grid */
.row {
  display: flex;
  flex-flow: row wrap;
  margin: 0 -10px;
  margin-bottom: 10px;
}
.row:last-child {
  margin-bottom: 0;
}
[class*="col-"] {
  padding: 10px;
  width: 100%;
}



@media all and ( min-width: 600px ) {

  /* set col widths */
  .col-2-3 {
    width: 66.66%;
	text-align:left;
	padding:25px;
  }
  .col-1-2 {
    width: 50%;
  }
  .col-1-3 {
    width: 33.33%;
  }
  .col-1-4 {
    width: 25%;
	
	margin-left: 15px;

  }
  .col-1-8 {
    width: 12.5%;
  }

}


/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin-left: 15px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.0%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }


/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
		margin-left: 15px;

}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.section {margin-left: 0px;
}
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}



/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 65.33%; }
.span_1_of_3 { width: 30.66%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
		.section {margin-left: 0px;
}
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 48%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 800px) {
	.section {margin-left: 0px;
}
	.col { 
		margin: 1% 0 1% 0%;
	}
	.span_1_of_4 {
		margin-left:0px;
	}
}

@media only screen and (max-width: 800px) {
	.section {margin-left: 0px;
}
	.span_2_of_2, .span_1_of_2 { width: 100%; }
}

#one {
    float:left; 
  margin-right:20px;
  width:480px;
  text-align:left;
 
}
#two { 
 
  overflow:hidden;
  margin-left:30px;
  height: 1200px;
  min-height:800px;
}

@media screen and (max-width: 900px) {
   #one { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
	clear:both;
	text-align:center;
  }
}



@media screen and (max-width: 800px) {
   .container2 { 
    float: none;
    margin:5px 5px;
	width:90%;
	max-width:700px;
	left:auto;
    width:auto;
    border:0;
	 margin-left:50px;

  }
  
  
  
}


@media screen and (max-width: 600px) {
   .container2 { 
    float: none;
    margin:5px 5px;
	width:90%;
	max-width:398px;
	left:auto;
    width:auto;
    border:0;
	 margin-left:20px;

  }
  
  
  
}


html, body{
  margin: 0px;
  padding: 0px;
  border:0px;

}

#wrap {
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  border:0px;
}
/*  GO FULL WIDTH BELOW 680 PIXELS */
@media (max-width: 800px) {
	.justicebox {
	margin-top:-30px !important;
	margin-left:50px !important;
	min-width:550px !important;
	
} 


.head2
{
	font-size: 35px !important;
	line-height:37px !important;

	
}
}
/*  GO FULL WIDTH BELOW 480 PIXELS */
@media (max-width: 480px) {
	.justicebox {
	min-width:450px !important;
	margin-left:-55px !important;
	
} 

.head2
{
	font-size: 25px !important;
	line-height:27px !important;	
}

.menu {
    width: 100%;
    float: left;
    padding: 15px;
}
.main2 {
    width: 100%;
    float: left;
    padding: 15px;
}



}
.mainbar {

	background-color:#333366;
	width:100%;
	height:100px;
} 


.justicebox {
	vertical-align: middle;
		text-align: ;
	margin-left:10%;
	margin-top:-100px;
	background-color:#;
	padding:0px;
	max-width:80%;
	z-index:0;
} 




.blue2 {
	vertical-align: middle;
	text-align: center;
	background-color:#002c5d;
	color:#fff;
	width:100%;
	font-size: 17px;
	padding:15px 0 15px 0;
	line-height: 94%;
	letter-spacing: 2px;
} 

.prophead1
{
font-family: 'Open Sans', sans-serif;
	color: #000;
	font-weight: 700; 
	font-size: 19px;
	line-height:0px;	
}

.prophead2
{
font-family: 'Open Sans', sans-serif;
	color: #000;
		font-weight: 300; 

	font-size: 16px;
	letter-spacing: ;
	line-height:0px;	
}



@media only screen and (min-width:480px) and (max-width: 800px) {
.blue2 {

	font-size: 14px !important;
		letter-spacing: 1px !important;

}
}
 
.blue2a {
	vertical-align: middle;
	text-align: center;
	background-color:#fff;
	color:#000000;
	width:100%;
		padding:15px 0 15px 0;
	font-size: 17px;
	font-family: 'Lora', serif;
	line-height: 80%;
} 




/*Header graphic*/


/* Basic Responsive Image */
img {
  width: 100%;
  height: auto;
}
/* Responsive Images in Columns */
.two-columns {
  width: 48%;
  display: inline-block;
}




hr, .hr {
    /* no need for border-left/right with the following: */
    border: none;
    border-bottom:1px solid #FFFFFF; 
    border-top:1px solid #dcdcdc; 
    clear:both; 
    height:0; 
    width: 100%;
}

/* Demo Page Styles: Media Queries */
@media (max-width: 400px) {
  body {
    font-size: 16px;
  }
  h1 {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 3px;

  }
  h2 {
    font-size: 22px;
    line-height: 26px;
    letter-spacing: 3px;
  }
  h3 {
    font-size: 18px;
    line-height: 22px;
  }
}
/* Responsive Images with Conditional Breakpoints  */

.breakpoint { /* One column for smartphones */
  max-width: 100%;
  display: inline-block;
  padding:20px;
}
@media (min-width: 420px) { /* Two columns for tablets */
  .breakpoint {
    max-width: 48%;
  }
}
@media (min-width: 760px) { /* Four columns for large devices */
  .breakpoint {
    max-width: 48%;
  }
}




/* ============================================================
  HEADER
============================================================ */


.headerbar {
  width: 100%;
  max-width: ;
  background-color: #; 
  text-align:center;
	  height:81px;
	   clear:both;
	   z-index:200;
}
@media (max-width: 480px) { 

.headerbar {
 
	  height:51px;
}}

#header ul {
  margin: 0 auto;
width:78%;
padding: 0;
  list-style: none;
  z-index:400;
}

#header ul li {
  float: left;
  width: auto;
  margin-top:0px;
    z-index:400;

}


#header ul li:nth-of-type(4) {
  margin-left: 317px;
  
}


#header ul li a:hover {
  color: #d80919;
}





header{
    position: fixed;
	    height: 90px; 
    background: #fff;
    width: 100%;
    text-align: right; 
    line-height: 108px;
    background: ;
    color: #f1612f;        
    // set animation
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
	background: rgb(255, 255, 255); /* Fall-back for browsers that don't
                                    support rgba */
    background: rgba(255, 255, 255, .3);
	z-index:500;
}
        

	header, a, img, li{
   transition: all 1s;
   -moz-transition: all 1s; /* Firefox 4 */
   -webkit-transition: all 1s; /* Safari and Chrome */
   -o-transition: all 1s; /* Opera */
   }

   
.logo {
	float:left;
	width:373px;
	height:90px;
	vertical-align: middle;
	margin:5px 50px;	
	padding: 0 0px;
	background-image:url('../images/logo_02.png');	
	background-repeat: no-repeat;
	z-index:500;

	
 }


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

   header{
    position: fixed;
	    height: 120px; 
    background: #fff;
    width: 100%;
    text-align: right; 
    line-height: 108px;
    background: ;
    color: #f1612f;        
    // set animation
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
	background: rgb(255, 255, 255); /* Fall-back for browsers that don't
                                    support rgba */
    background: rgba(255, 255, 255, .3);
	z-index:500;
}

.logo {
	float:center;
	vertical-align: middle;
	margin:0px 0px;	
	padding: 0 0px;
	
 }
	
}
 
 

 
 
/* ============================================================
  FOOTER
============================================================ */

footer {
	clear: both;
	padding: 0 15px;
	background-color:#333333;
	text-align:center;
	color:#fff;
}

footer2 {
	background-color:#494949;
	height:148px;
	text-align:left;
	color:#fff;
}




@media all and (min-width: 600px) {

  footer nav a {
    display: inline-block;
    margin: 0;
  }

}

/* ============================================================
  TEXT LEVEL SEMANTICS
============================================================ */
a {
  text-decoration: none;
  color:#617daa ;
}

a:hover {
  color:#5e5e5e ;
}

.headwhite1 a {
  text-decoration: none;
  color:#fff ;
}
.links{
	position:relative;
	float:right;
	height:50px;
	top:-20px;
	margin: 0 auto;
}

 
b:link {
	text-decoration: none;
    color: #fff;
}

b:hover {
    color: #434343;
}
a.register:link {
	text-decoration: none;
}

a.register:hover {
    color: #fff;
}




 

/* ============================================================
  GHOST BUTTON
============================================================ */

.clear{
	margin:0 auto;
clear:both;
}

/* learn more white */
.btn3 a{
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  vertical-align:middle;
  top:170px;
  position:relative;

}
.btn3 {
  display: inline-block;
  width: 331px;
  height:70px;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size:30px;
  padding: 17px;
  color: #fff;
  background-color: #fe7843; /* fallback */
  background-color: rgba(254, 120, 67, 1.0);
  border: 0px solid #fff;
  border-radius: 0px;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out,
  border-color 0.2s ease-out;
}
.btn3:hover,
.btn3:active {
  color: #fe7843;
    background-color: #fff; /* fallback */
  background-color: rgba(255, 255, 255, 1.0);
  border-color: #01226b; /* fallback */
  border-color: rgba(1, 34, 107, 1.0);
    border: 1px solid #fe7843;

  transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
}
.btn3:hover a,
.btn3:active a{
  color: #fe7843;
    
}







/* learn more white */
.btn4 a{
  background-color: #333366;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  vertical-align:middle;
  top:170px;
  position:relative;

}
.btn4 {
  display: inline-block;
  width: 331px;
  height:70px;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  font-size:30px;
  padding: 17px;
  color:#fff;
  background-color: #333366; /* fallback */
  background-color: rgba(51, 51, 102, 1.0);
  border: 0px solid #fff;
  border-radius: 0px;
  text-align: center;
  outline: none;
  text-decoration: none;
  transition: background-color 0.2s ease-out,
  border-color 0.2s ease-out;
}
.btn4:hover,
.btn4:active {
  color: #333366;
    background-color: #fff;
; /* fallback */
  background-color: rgba(255, 255, 255, 1.0);
  border-color: #01226b; /* fallback */
  border-color: rgba(1, 34, 107, 1.0);
    border: 0px solid #fe7843;

  transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
}
.btn4:hover a,
.btn4:active a{
  color: #fe7843;
    
}
/* ============================================================
  FONTS
============================================================ */

h4 {
	
font-family: 'Merriweather', serif;
	color: #002c5d;
	font-size: 400%;
	line-height: 95%;
	text-transform: uppercase;
		font-weight: 700; 

	
	}
	
.head2
{
	font-family: 'Lora', serif;
	color: #fff;
	font-weight:700;
	font-size: 400%;
	line-height:77px;

	
}



.head1
{
	font-family: 'Lora', serif;
	color: #002c5d;
	font-size: 25px;
	letter-spacing: 2px;
	line-height:27px;
		text-transform: uppercase;

	
}

.headdark
{
	
	font-family: 'Roboto', sans-serif;
	color: #1c1c1c;
	font-size: 42px;
	line-height: 60px;
	text-transform: uppercase;
	font-weight: 100; 
	
}
.headdark2
{
	
font-family: 'Open Sans', sans-serif;
	color: #000;
	font-size: 45px;
	line-height: 41px;

	font-weight: 600; 
	
}
.headdark3
{
	
	font-family: 'Lora', serif;
	color: #002c5d;
	font-size: 18px;
	line-height: 30px;
	text-transform: uppercase;
	font-weight: 100; 
	
}
.bodydark
{
	font-family: 'Raleway', sans-serif;
	color: #5e5e5e;
	font-size: 20px;
	line-height: 32px;
	font-weight: 300; 
	
	
}


.bodydark4
{
	font-family: 'Open Sans', sans-serif;
	color: #5e5e5e;
	font-size: 15px;
	line-height: 32px;
	font-weight: 400; 
	
	
}

.bodydark4head
{
	font-family: 'Open Sans', sans-serif;
	color: #5e5e5e;
	font-size: 15px;
	line-height: 32px;
	font-weight: 700; 
	
	
}

.bodydark2
{
	font-family: 'Raleway', sans-serif;
	color: #5e5e5e;
	font-size: 36px;
	line-height: 38px;
	font-weight: 400; 
	
	
}

.headwhite
{
	
	font-family: 'Lora', serif;
	color: #fff;
	font-size: 20px;
	line-height: 26px;
	font-weight: 100; 
	
}
.headwhite1
{
	
	font-family: 'Lora', serif;
	color: #fff;
	font-size: 25px;
	line-height: 30px;
	text-transform: uppercase;
	font-weight: 100; 
	letter-spacing: 2px;
	
}
.headwhite2
{
	
	font-family: 'Lora', serif;
	color: #fff;
	font-size: 42px;
	line-height: 20%;
	text-transform: uppercase;
	font-weight: 100; 
	letter-spacing: 2px;
	    font-weight: bold;
	
}



.body {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size:20px;
	line-height: 40px;
	color:#2d2d2d;
}

.bodywhite {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size:17px;
	line-height: 30px;
	color:#fff;
}

.bodysmall {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size:14px;
	line-height: 26px;
	color:#2d2d2d;
}

.bodyital {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size:14px;
	line-height: 26px;
	color:#2d2d2d;
	font-style:italic;
}




.footstyle {
	font-size: 17px;
	text-align:center;
	line-height:26px;
	color: #fff;
	font-family: 'Raleway', sans-serif;
}