@charset "UTF-8";
/* CSS Document */

body, html {height:100%; width:100%;}
body {background:url(/images/fabric.jpg) repeat #232327; text-decoration:none; padding:0; margin:0;}

.wrapper {width:96%; max-width:960px; margin:0 auto; padding:0;}
.leftcol {width:100%; max-width:640px; float:left; padding:0; margin:0;}
.wrapper-white-area{
    max-width: 900px;
}

/* ================================================================== GRAPHICS ================================================================================================== */

.ryancox {background:url(/images/ryan-cox.jpg) no-repeat center top #181818; padding:0; margin:0 auto; min-height:800px;}
.fade {background:url(/images/fade.jpg) repeat-x top #ffffff; padding:65px 0 50px; margin:0; width:100%; height:auto; min-height:180px;}
.fabric {background:url(/images/fabric.jpg) repeat #232327; padding:50px 0 50px; margin:0; width:100%; background-position:bottom;}
.redline {background:#ab263e; width:100%; height:8px; margin:0 auto; padding:0;}
.redline2 {background:#ab263e; width:94%; height:2px; margin:0 auto; padding:0;}
.thumb {border: 4px solid #ffffff; margin:0 auto; text-align:center; padding:0; width:100%; max-width:320px;}
.thumb:hover {border: 4px solid #ab263e; margin:0 auto; text-align:center; padding:0; width:100%; max-width:320px;}

.fade h1 {
	color:#333;
	text-shadow:none;
	font-weight:600;
	font-size:32pt;
}
.fade h2 {
	font-size:32pt;
}
.fade__text li {
    color:    #000;
    font-size: 14pt;
    line-height: 20pt;
font-weight:300;
    font-family: 'Roboto', helvetica, frutiger, verdana, sans-serif;
margin-bottom:10px;
}
/* ================================================================== TYPOGRAPHY ================================================================================================== */

h1 {font-family: 'Roboto Slab', helvetica, frutiger, verdana, sans-serif; font-size:54pt; color:#ffffff; font-weight:100; line-height:1.25em; letter-spacing:1px; margin:0 auto; padding:0; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);}
h2 {font-family: 'Roboto Condensed', helvetica, frutiger, verdana, sans-serif; text-transform:uppercase; font-size:42pt; color:#808080; font-weight:100; line-height:1.25em; letter-spacing:1px; margin:0 auto; padding:0; text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);}
p {font-family: 'Roboto', helvetica, frutiger, verdana, sans-serif; font-size:24pt; font-weight:300; color:#fff; text-decoration:none; border:none;}
@media only screen and (max-width : 767px),
only screen and (max-device-width : 767px){	
	p{
		font-size: 35pt;
	}
}

p .pfine {font-size:14pt;color: #8a8a8a;}

a:link {font-family: 'Roboto', helvetica, frutiger, verdana, sans-serif; font-size:24pt; font-weight:300; color:#ab263e; text-decoration:none; border:none;}
a:visited {font-family: 'Roboto', helvetica, frutiger, verdana, sans-serif; font-size:24pt; font-weight:300; color:#ab263e; text-decoration:none; border:none;}
a:active {font-family: 'Roboto', helvetica, frutiger, verdana, sans-serif; font-size:24pt; font-weight:300; color:#ab263e; text-decoration:none; border:none;}
a:hover {font-family: 'Roboto', helvetica, frutiger, verdana, sans-serif; font-size:24pt; font-weight:300; color:#888; text-decoration:none; border:none;}

.fade__text a:link,.fade__text a:visited,.fade__text a:active,.fade__text a:hover {
	font-size:14pt;
}
/* ============================= LOGOS   ============================================================================= */

.leftcol__text{
padding-left: 20px;
}
.leftcol__text a{
	color: #fff;
	font-size:24pt;
}
.leftcol__text a:hover{
	color: #ab263e;
}

@media only screen and (max-width : 767px),
only screen and (max-device-width : 767px){	
	.leftcol__text{
		padding-left: 15px;
	}
	.leftcol__text a, .pmargin a{
		font-size: 35pt;
	}
	#intro_heading {
	    font-size: 14pt !important;
	}

}

ul#logos {width:640px; padding:0 0 0 55px; margin:0 auto; list-style:none; border:none;}
ul#logos li {
display: inline-block;
color:#fff;
font-size: 18pt;
line-height: 20pt;
text-transform: uppercase;
text-align: center;
}
ul#logos li a {display:block; height:160px; /*background:url(/images/ryan-insurance+parkside-mortgage.png) no-repeat;*/ float:left; /*text-indent:-9999px;*/ margin:12px auto 0; padding:0px; border:none; }
	
ul#logos li a.ryaninsurance {
	background:url(/images/ryan-insurance+parkside-mortgage2.png) no-repeat;
	width:280px; background-position: 0px 0px; padding-right:15px;
	
}
ul#logos li a.ryaninsurance:hover {
	width:280px; background-position:0px -160px; padding-right:15px;
}
	
ul#logos li a.parksidemortgage {
	width:280px; background-position: -300px 0px;
	/*transition: .4s;*/
}
ul#logos li a.parksidemortgage:hover {
	width:280px; background-position: -300px -160px;
	filter: grayscale(100%);
}


/* ============================= SOCIAL MEDIA   ============================================================================= */


ul#social-networking {/*width:520px;*/ padding:0; margin:0 auto; list-style:none; border:none; text-align:center;}
ul#social-networking li {
    margin: 0 15px;
    display: inline-block;
}
ul#social-networking li a {
	display:block; 
	width: 80px; 
	height:80px; 
	background:url(/images/social_icons.png) no-repeat; 
	/*background-size: cover;*/
	text-indent:-9999px; 
	margin:0 auto; 
	padding:0px; 
	border:none; 
	text-align:center;
}
	
ul#social-networking li a.facebook {
	background-position: 0px 0px;
}
ul#social-networking li a.facebook:hover {
	background-position:0px -80px;
}
	
ul#social-networking li a.instagram {
	background-position: -100px 0px;
}
ul#social-networking li a.instagram:hover {
	background-position: -100px -80px;
}
	
ul#social-networking li a.twitter {
	background-position: -200px 0px;
}
ul#social-networking li a.twitter:hover {
	background-position: -200px -80px; 
}	
ul#social-networking li a.linkedin {
	background-position: -300px 0px;
}
ul#social-networking li a.linkedin:hover {
	background-position: -300px -80px;
}
ul#social-networking li a.youtube {
	background-position: -400px 0px;
}
ul#social-networking li a.youtube:hover {
	background-position: -400px -80px;
}

.fabric p{
	margin-bottom: 0;
	padding: 0 15px;
}
.fade__text{
/*	text-align: center; */
}
.fade__text p{
	color: #000;
	font-size: 14pt;
	line-height: 20pt;
}



.contactus {
margin:40px 0;
}
.contactus * {
	box-sizing: border-box;
}
.contactus .ff {
width: 100%;
padding: 10px 15px;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
color: #333;
border: 1px solid #d5dae2;
border-radius: 3px;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
font-family: 'Roboto', helvetica, frutiger, verdana, sans-serif;
}
.contactus .ff:focus {
box-shadow: 0 0 10px rgba(55, 125, 255, 0.1);
border-color:rgba(171, 38, 62, 0.7);
}	
.contactus .btn {
cursor:pointer;
background-color:#AB263E;
color: #fff;
transition: all 0.2s ease-in-out;
padding: 10px 25px;
font-size: 18px;
font-weight: 400;
line-height: 1.5;
border:0;
border-radius: 3px;
text-transform:uppercase;
}
.contactus .btn:hover {
box-shadow: 0 4px 11px rgba(171, 38, 62, 0.35);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
background:#333;
}
.contactus.subscribe {
	max-width:480px;
	margin:40px auto 30px;
}
.contactus.subscribe .ff{
	padding: 7px 10px;
}
.contactus.subscribe .ff:focus{
	
}
.contactus.subscribe .btn{
	padding: 8px 15px;
}
.contactus.subscribe .btn:hover{
box-shadow: 0 4px 11px rgba(255, 255, 255, 0.15);
-webkit-transform: translateY(0);
transform: translateY(0);
background:#888;	
}
/* ================================================================== RESPONSIVE GRID COLUMNS SETUP ================================================================================================== */

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

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin:0 auto;
	padding:10px  ;
}
.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 TWO  === */
.span_2_of_2 {width: 96%;}
.span_1_of_2 {width: 48%;}


/* === GRID OF THREE   === */
.span_3_of_3 {width: 100%;}
.span_2_of_3 {width: 66.6666666667%;}
.span_1_of_3 {width: 33.3333333333%;}


/* === GRID OF FOUR   === */
.span_4_of_4 {width: 100%;}
.span_3_of_4 {width: 75%;}
.span_2_of_4 {width: 50%;}
.span_1_of_4 {width: 25%;}


/* === GRID OF FIVE   === */
.span_5_of_5 {width: 100%;}
.span_4_of_5 {width: 80%;}
.span_3_of_5 {width: 60%;}
.span_2_of_5 {width: 40%;}
.span_1_of_5 {width: 20%;}


/* === GRID OF SIX   === */
.span_6_of_6 {width: 100%;}
.span_5_of_6 {width: 83.3333333333%;}
.span_4_of_6 {width: 66.6666666667%;}
.span_3_of_6 {width: 50%;}
.span_2_of_6 {width: 33.3333333333%;}
.span_1_of_6 {width: 16.6666666667%;}


/* === GRID OF EIGHT   === */
.span_8_of_8 {width: 100%;}
.span_7_of_8 {width: 87.5%;}
.span_6_of_8 {width: 75%;}
.span_5_of_8 {width: 62.5%;}
.span_4_of_8 {width: 50%;}
.span_3_of_8 {width: 37.5%;}
.span_2_of_8 {width: 25%;}
.span_1_of_8 {width: 12.5%;}


/* ================================================================== MEDIA QUERIES ================================================================================================== */


@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){	
	.span_1_of_6 { width: 33.33%;}
	}
@media only screen and (max-width : 640px),
only screen and (max-device-width : 640px){	
	.span_8_of_8 { width: 100%;}
	.span_7_of_8 { width: 100%;}
	.span_6_of_8 { width: 100%;}
	.span_5_of_8 { width: 100%;}
	.span_4_of_8 { width: 100%;}
	.span_3_of_8 { width: 100%;}
	.span_2_of_8 { width: 100%;}
	.span_1_of_8 { width: 100%;}
	.span_2_of_2 { width: 100%;}
	.span_6_of_6 { width: 100%;}
	.span_5_of_6 { width: 100%;}
	.span_4_of_6 { width: 100%;}
	.span_3_of_6 { width: 100%;}
	.span_2_of_6 { width: 100%;}
	.span_1_of_6 { width: 100%;}
	.span_5_of_5 { width: 100%;}
	.span_4_of_5 { width: 100%;}
	.span_3_of_5 { width: 100%;}
	.span_2_of_5 { width: 100%;}
	.span_1_of_5 { width: 100%;}
	.span_4_of_4 { width: 100%;}
	.span_3_of_4 { width: 100%;}
	.span_2_of_4 { width: 100%;}
    .span_1_of_3 { width: 100%;}
    
    ul#logos{
        position: relative;
        top: -20px; 
        padding-left:125px;
    }
	}