/*
=======================================================================
 Desktop Styles
=======================================================================
*/

@font-face {
    font-family:'Arial Black'; 
    src: url("../css/arial-black.ttf") format("truetype");
}
    
body {
    width:100%;
    height:auto;
    font-family:Arial;
    font-size:15px;
    color:#000;
    margin:0;
    padding:0;
    text-align:center;
    background:#FFF;
}

.content_container {
    position:relative;
    top:0;
    left:0;
    width:88%;
    max-width:1880px;
    height:auto;
    margin:0 auto;
    text-align:left;
    box-sizing:border-box;
    overflow:hidden;
}

h1 {font-family:Arial Black; font-size:40px; margin:0; text-transform:uppercase;}
h2, h3 {font-family:Arial Black; font-size:26px; color:#EA9600; margin-top:0; margin-bottom:15px; text-transform:uppercase;}
h2 span, h3 span {color:#0C1545;}

.col-1 {width:8.33%;}
.col-2 {width:16.66%;}
.col-3 {width:25%;}
.col-4 {width:33.33%;}
.col-5 {width:41.66%;}
.col-6 {width:50%;}
.col-7 {width:58.33%;}
.col-8 {width:66.66%;}
.col-9 {width:75%;}
.col-10 {width:83.33%;}
.col-11 {width:91.66%;}
.col-12 {width:100%;}

[class*="col-"] {float:left; box-sizing:border-box;}

.padall {padding:10px;}
.padleft {padding-left:10px;}
.padright {padding-right:10px;}
.padtop {padding-top:10px;}
.padbottom {padding-bottom:10px;}
.padleftright {padding-left:10px; padding-right:10px;}
.padtopbottom {padding-top:10px; padding-bottom:10px;}

.aligncenter {text-align:center;}
.alignright {text-align:right;}

p {margin-top:0; margin-bottom:15px;}
.lastparagraph {margin:0;}

.leftimage {float:left; width:45%; height:auto; margin-right:15px; margin-bottom:10px;}
.rightimage {float:right; width:45%; height:auto; margin-left:15px; margin-bottom:10px;}

/*
=======================================================================
 Website Header
=======================================================================
*/

#topheader {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:130px;
	color:#FFF;
	font-weight:bold;
	z-index:5;
}

.logo {
	float:left;
	width:48%;
	height:auto;
}

.phone, .address {
	float:left;
	width:26%;
	height:auto;
}

#mobilenavigation, #mobilevisitor, #mobilecall a {
	display:none;
}

.headericon {
	float:left;
	width:15%;
	height:auto;
	font-size:48px;
	color:#EA9600;
	padding-top:38px;
}

.logoicon {
	float:left;
	width:13%;
	height:auto;
	font-size:62px;
	padding-top:28px;
}

.logotext {
	float:right;
	width:86%;
	height:auto;
	font-family:Arial Black;
	font-size:36px;
	padding-top:35px;
	text-transform:uppercase;
	line-height:30px;
}

.logotext span {
	font-size:21px;
	color:#EA9600;
}

.logotext a {
	text-decoration:none;
	color:#FFF;
}

.icontext {
	float:right;
	width:84%;
	height:auto;
	font-size:18px;
	line-height:30px;
	padding-top:35px;
}

.icontext a {
	color:#FFF;
	text-decoration:none;
}

.fadein {
	animation:fadeinanim 1s forwards;
	-webkit-animation:fadeinanim 1s forwards;
	opacity:0;
}

.fadeout {
	animation:fadeoutanim 1s forwards;
	-webkit-animation:fadeoutanim 1s forwards;
	opacity:1;
}

@keyframes fadeinanim {
	to {opacity:1;}
}

@-webkit-keyframes fadeinanim {
	to {opacity:1;}
}

@keyframes fadeoutanim {
	to {opacity:0;}
}

@-webkit-keyframes fadeoutanim {
	to {opacity:0;}
}

/*
=======================================================================
 Top Navigation
=======================================================================
*/

#topnavbar {
	position:fixed;
	top:130px;
	left:0;
	width:100%;
	height:auto;
    background:#0C1545;
	box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.5);
	z-index:5;
}

#navigation {
	position:relative;
	top:0;
	left:0;
	width:88%;
    max-width:1880px;
	height:auto;
	font-weight:bold;
	margin:0 auto;
}

#navigation ul {
	text-align:center;
	margin:0;
	padding:0;
	list-style:none;
}

#navigation ul li {
	display:inline-block;
	position:relative;
	cursor:pointer;
	text-transform:uppercase;
    margin-left:-5px;
}

#navigation ul li a.nav {
	display:inline-block;
	color:#FFF;
	font-size:16px;
	font-weight:bold;
	text-decoration:none;
	padding:22px 55px 22px 55px;
	transition:all 0.3s ease 0s;
}

#navigation ul li a.nav:hover {
	background:#EA9600;
}

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

#slider {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:680px;
	color:#FFF;
	background:#040A2C;
	background-image:url(../images/slider.jpg);
	background-repeat:no-repeat;
	background-position:center;
	text-shadow:2px 2px 2px #000;
}

#slider span {
	color:#EA9600;
}

.slidertext {
	float:right;
	width:63%;
	height:auto;
	text-align:center;
	padding-top:335px;
}

#slider p {
	font-size:30px;
	font-weight:bold;
	text-align:center;
	margin-top:20px;
	margin-bottom:0;
	text-transform:none;
	line-height:45px;
}

.sliderphoto {
	float:left;
	width:35%;
	max-width:375px;
	height:auto;
	padding-top:202px;
}

.slidercontact {
	float:left;
	width:35%;
	height:auto;
	padding-top:225px;
}

/*
=======================================================================
 Benefits Content
=======================================================================
*/

#benefits {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	font-size:25px;
	font-weight:bold;
	margin-top:40px;
	margin-bottom:40px;
}

#benefits span {
	color:#FFF;
	font-size:80px;
	padding-bottom:10px;
}

#benefits p {
	font-size:18px;
	margin-top:15px;
	margin-bottom:10px;
	color:#FFF;
}

.benefitboxes {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
}

.boxcol {
	float:left;
	width:32%;
	height:auto;
	color:#EA9600;
	background:#0C1545;
	padding:15px;
	text-align:center;
	box-sizing:border-box;
	border-radius:10px;
}

.boxcoltwo {
	float:left;
	width:32%;
	height:auto;
	color:#EA9600;
	background:#0C1545;
	margin-left:2%;
	margin-right:2%;
	padding:15px;
	text-align:center;
	box-sizing:border-box;
	border-radius:10px;
}

/*
=======================================================================
 Main Content
=======================================================================
*/

#bailbonds, #bondsman, #testimonials {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	margin-bottom:40px;
}

#counties {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	color:#FFF;
	font-size:18px;
	font-weight:bold;
	background-image:url(../images/slider.jpg);
	background-repeat:no-repeat;
	background-position:center;
	padding-top:30px;
	padding-bottom:30px;
	margin-bottom:40px;
	box-sizing:border-box;
}

#counties h2 {font-size:40px; text-align:center;}
#counties h2 span {color:#EA9600;}

/*
=======================================================================
 Counties Content
=======================================================================
*/

#cities {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	font-size:22px;
	font-weight:bold;
}

#cities span {
	color:#FFF;
	font-size:80px;
	padding-bottom:10px;
}

#cities p {
	font-size:17px;
	margin-top:10px;
	margin-bottom:10px;
	color:#FFF;
}

.jail {
	float:left;
	width:22%;
	height:auto;
	color:#EA9600;
	background:rgb(12,21,69);
	background:rgba(12,21,69,0.8);
	border-radius:10px;
	padding:15px;
	text-align:center;
	box-sizing:border-box;
	margin-top:20px;
	margin-right:4%;
}

.jailtwo {
	float:left;
	width:22%;
	height:auto;
	color:#EA9600;
	background:rgb(12,21,69);
	background:rgba(12,21,69,0.8);
	border-radius:10px;
	padding:15px;
	text-align:center;
	box-sizing:border-box;
	margin-top:20px;
}

.smallbutton a {
	display:block;
	width:80%;
	height:40px;
	line-height:40px;
	margin-top:20px;
	margin-bottom:10px;
	margin-left:10%;
	margin-right:10%;
	border:1px solid #FFF;
	font-size:16px;
	color:#FFF;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	border-radius:12px;
	box-sizing:border-box;
	transition:all 0.3s ease 0s;
	background:#EA9600;
}

.smallbutton a:hover {
	background:#FFB01A;
}

/*
=======================================================================
 Footer Section
=======================================================================
*/

#contact {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	color:#FFF;
	background:#040A2C;
}

#contact h3 {
	color:#EA9600;
	font-size:20px;
	margin-top:20px;
	margin-bottom:20px;
	text-transform:uppercase;
}

#contact h3 span {
	color:#FFF;
}

#contact span {
	color:#EA9600;
}

#contact p {
    margin-top:5px;
    margin-bottom:15px;
}

#contact a {
	text-decoration:none;
	color:#FFF;
}

.copyright {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	font-size:14px;
	text-align:center;
    margin-top:30px;
	margin-bottom:20px;
    line-height:25px;
}

/*
=======================================================================
 Form Styles
=======================================================================
*/

.consultationform {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:auto;
	box-sizing:border-box;
	padding:20px;
	background:rgb(12,21,69);
	background:rgba(12,21,69,0.5);
	border-radius: 0 0 10px 10px;
	color:#FFF;
	font-size:18px;
	font-weight:bold;
	text-align:center;
}

.consultationtitle {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:60px;
	color:#FFF;
	background:#EA9600;
	line-height:60px;
	font-size:22px;
	font-weight:bold;
	text-align:center;
	text-transform:uppercase;
	border-radius:10px 10px 0 0;
}

.consultationphone {
	position:relative;
	top:0;
	left:0;
	width:100%;
	font-size:24px;
	margin-top:30px;
	margin-bottom:10px;
	text-transform:uppercase;
}

.consultationphone a {
	color:#FFF;
	text-decoration:none;
}

input[type=text] {
	width:100%;
	padding:8px;
	box-sizing:border-box;
	border:1px solid #CCC;
	font-size:14px;
}

select {
    width:100%;
    padding:8px;
	border:1px solid #CCC;
    box-shadow:none;
    background:#F2F2F2;
	font-size:14px;
    -webkit-appearance:none;
}

textarea {
	width:100%;
	max-width:100%;
	padding:8px;
	border:1px solid #CCC;
	font-size:14px;
	box-sizing:border-box;
}

.submitbutton a {
	display:block;
	width:50%;
	height:46px;
	line-height:46px;
	margin-top:15px;
	margin-left:25%;
	margin-right:25%;
	background:#EA9600;
	font-size:18px;
	color:#FFF;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
	border-radius:12px;
	text-transform:uppercase;
	box-sizing:border-box;
}

.submitbutton a:hover {
	background:#FFB01A;
}
    
/*
=======================================================================
 Desktop 1480-1680
=======================================================================
*/

@media screen and (max-width:1679px)
{
	#topheader .icontext {font-size:17px;}
	#navigation ul li a.nav {padding:22px 42px 22px 42px;}
	#benefits p {font-size:16px;}
}

/*
=======================================================================
 Desktop 1280-1480
=======================================================================
*/

@media screen and (max-width:1479px)
{
	#topheader .logoicon {font-size:50px; padding-top:34px;}
	#topheader .logotext {font-size:29px;}
	#topheader .logotext span {font-size:17px;}
	#topheader .icontext {font-size:15px;}
	#navigation ul li a.nav {font-size:15px; padding:22px 31px 22px 31px;}
	h1 {font-size:34px;}
	#slider p {font-size:26px;}
	#slider .consultationtitle {font-size:18px;}
	#slider .consultationphone {font-size:20px;}
	#benefits p {font-size:16px;}
	#cities .smallbutton a {font-size:13px;}
	#cities p {font-size:14px;}
}

/*
=======================================================================
 Desktop 1024-1280
=======================================================================
*/

@media screen and (max-width:1279px)
{
	.content_container {width:94%;}
	#navigation {width:94%;}
	#topheader .logo {width:42%;}
	#topheader .phone {width:31%;}
	#topheader .address {width:27%;}
	#topheader .logoicon {font-size:42px; padding-top:40px;}
	#topheader .logotext {font-size:22px;}
	#topheader .logotext span {font-size:12px;}
	#topheader .icontext {font-size:15px;}
	#navigation ul li a.nav {font-size:14px; padding:22px 22px 22px 22px;}
	h1 {font-size:29px;}
	#slider p {font-size:23px;}
	#slider .consultationtitle {font-size:17px;}
	#slider .consultationphone {font-size:18px;}
	#slider .submitbutton a {width:60%; margin-left:20%; margin-right:20%;}
	#benefits p {font-size:16px;}
	#cities {font-size:20px;}
	#cities p {font-size:12px;}
	#cities .smallbutton a {width:90%; font-size:12px; margin-left:5%; margin-right:5%;}
}

/*
=======================================================================
 Tablets 768-1024
=======================================================================
*/

@media screen and (max-width:1023px)
{
	.content_container {width:96%;}
	#navigation {width:96%;}
	#topheader .logo {width:60%;}
	#topheader .phone {width:40%;}
	#topheader .address {display:none;}
	#topheader .logoicon {font-size:42px; padding-top:40px;}
	#topheader .logotext {font-size:22px;}
	#topheader .logotext span {font-size:13px;}
	#topheader .icontext {font-size:15px;}
	#navigation ul li a.nav {font-size:12px; padding:22px 12px 22px 12px;}
	h1 {font-size:23px;}
	#slider p {font-size:18px;}
	#slider .consultationtitle {font-size:13px;}
	#slider .consultationphone {font-size:13px;}
	#slider .submitbutton a {width:60%; margin-left:20%; margin-right:20%; font-size:13px;}
	input[type=text] {font-size:11px;}
	textarea {font-size:11px;}
	#benefits {font-size:17px;}
	#benefits p {font-size:13px;}
	#counties h2 {font-size:30px; text-align:center;}
	#cities {font-size:24px;}
	#cities span {font-size:60px;}
	#cities p {font-size:13px;}
	#cities .smallbutton a {width:98%; font-size:10px; margin-left:1%; margin-right:1%;}
	#contact {font-size:13px;}
	#contact h3 {font-size:16px;}
}

/*
=======================================================================
 Mobile & Small Tablets
=======================================================================
*/
    
@media screen and (max-width:767px)
{
    body {font-size:14px;}
	
	.content_container {width:96%;}
    
    h1 {font-size:25px;}
    h2, h3 {font-size:18px;}
	
	.leftimage {width:100%; margin-right:0;}
	.rightimage {width:100%; margin-left:0;}
	
	#topheader {height:80px; background:#040A2C; box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.5);}
	#topheader .phone {display:none;}
	#topheader .address {display:none;}
	#topheader .logo {width:86%;}
	#topheader .logoicon {width:16%; font-size:35px; padding-top:16px;}
	#topheader .logotext {width:84%; font-size:15px; padding-top:18px; line-height:20px;}
	#topheader .logotext span {font-size:9px;}
	
	.smallbutton a {width:60%; margin-left:20%; margin-right:20%;}
	.bigbutton a {width:80%; margin-left:10%; margin-right:10%;}
	
	#topnavbar {display:none; top:80px; background:#0C1545; max-height:calc(100% - 80px); overflow-x:hidden; overflow-y:scroll;}
	#navigation {width:100%; min-width:1px; max-width:768px; margin:0;}
	#navigation ul li {width:100%; margin:0;}
    #navigation ul li a.nav {font-size:16px; width:100%; padding:15px 0 15px 10px; text-align:left;}
    #mobilenavigation {display:block; float:right; width:40px; height:40px; font-size:24px; line-height:40px; text-align:center; margin-top:18px; box-sizing:border-box;}
	#mobilenavigation a {display:block; width:100%; height:100%; background:#EA9600; color:#FFF; text-decoration:none;}
	
	#slider {margin-top:80px;}
	#slider .slidertext {width:100%; font-size:30px; padding-top:30px;}
	#slider .slidertext p {font-size:13px; line-height:25px; margin-top:15px;}
	#slider .slidercontact {width:100%; padding-top:30px;}
	#slider .consultationtitle {font-size:16px;}
	#slider .consultationphone {font-size:16px;}
	#slider .submitbutton a {width:60%; margin-left:20%; margin-right:20%; font-size:16px;}

	#benefits {font-size:24px;}
	#benefits p {font-size:16px;}
	#benefits .boxcol {width:100%;}
	#benefits .boxcoltwo {width:100%; margin-top:20px; margin-bottom:20px; margin-left:0; margin-right:0;}

	#counties {background-image:none; padding-top:0; padding-bottom:0;}
	#counties h2 {font-size:18px; text-align:left; margin-bottom:0;}
	#counties h2 span {color:#0C1545;}
	#cities {font-size:15px;}
	#cities p {font-size:14px;}
	#cities .jail {width:48%; margin-left:1%; margin-right:1%; background:rgba(12,21,69,1.0);}
	#cities .jailtwo {width:48%; margin-left:1%; margin-right:1%; background:rgba(12,21,69,1.0);}
	#cities .smallbutton a {font-size:10px;}

	#testimonials .col-4 {width:100%; padding:0;}
	
	#contact .col-4 {width:100%; padding:0;}
	#contact .copyright {font-size:12px; margin-top:20px; margin-bottom:70px;}

	#mobilecall a {display:block; position:fixed; bottom:0; left:0; width:100%; height:50px; background:#EA9600; line-height:50px; font-family:Arial Black; font-size:18px; color:#FFF; text-align:center; text-decoration:none; text-transform:uppercase; z-index:5;
	}
	
	@media all and (orientation: landscape)
	{
		#topheader .logoicon {width:12%; font-size:46px; padding-top:12px;}
		#topheader .logotext {width:88%; font-size:24px; padding-top:15px; line-height:24px;}
		#topheader .logotext span {font-size:14px;}
		
		#slider .slidertext p {font-size:22px; line-height:25px; margin-top:30px;}

		#cities {font-size:21px;}
		#cities p {font-size:13px;}
		#cities .jail {width:22%; margin-left:0; margin-right:4%; background:rgba(12,21,69,1.0);}
		#cities .jailtwo {width:22%; margin-left:0; margin-right:0; background:rgba(12,21,69,1.0);}
		#cities .smallbutton a {font-size:8px;}

		#contact .copyright {font-size:12px; margin-top:20px; margin-bottom:20px;}

		#mobilecall a {display:none;}
	}
}