/*
Theme Name: sytfirm
Theme URI: http://www.sytfirm.com/
Description: A custom theme developed by Internet Imagineering.
Version: 1.0
Author URI: http://www.internetimagineering.com/
Tags: fixed width, two columns
*/

:root {
    --blue: #233d60;
    --gold: #c19e70;
    --green: #1f4939;
    --gray: #5b5f64;
    --white: #ffffff;
    --red: #990000;
    
    --black: #000000;
    --ltblack: #333333;
    --ltgray: #DDDDDD;
    --midgray: #CCCCCC;
    --dkgray: #666666;

}

body {
	background-color: #fff;
	margin: 0px 0px; 
	padding: 0px;
	font-family: 'Oswald', trebuchet ms, arial, verdana, sans-serif;
	color: var(--ltblack);
	font-size: 20px;
	font-weight: 300;
}

.clear { clear: both;}

/* IMAGES */
	.circular--square { border-radius: 50%; }
	
	.imgfade {
		opacity: 1;
		transition: opacity .25s ease-in-out;
		-moz-transition: opacity .25s ease-in-out;
		-webkit-transition: opacity .25s ease-in-out;
	}

	.imgfade:hover {
		opacity: 0.5;
	}
	
/* GOLD SEPARATORS */
	.footerIconLine {width: 94%; max-width: 1440px; margin: 100px auto; display: grid; grid-template-columns: 1fr 40px 1fr; grid-column-gap: 30px; align-items: center;}
	hr.gold {border: 0; background-color: var(--gold); height: 4px;}

/* BUTTONS */
	button.buttonWhite {font-size: 20px; background-color: var(--white); color: var(--gold); text-align: center; padding: 10px 30px; border: 0px; font-family: 'Oswald', sans-serif;}
	button:hover.buttonWhite {background-color: var(--blue); color: var(--white);}
	
	button.buttonWhite2 {font-size: 20px; background-color: var(--white); color: var(--blue); text-align: center; padding: 10px 30px; border: 0px; font-family: 'Oswald', sans-serif; border: 2px solid var(--blue); width: 100%;}
	button:hover.buttonWhite2 {background-color: var(--blue); color: var(--white); cursor: pointer;}
	
	button.buttonWhite3 {font-size: 16px; background-color: var(--white); color: var(--blue); text-align: center; padding: 10px 30px; border: 0px; font-family: 'Oswald', sans-serif; border: 2px solid var(--blue); width: 90%;}
	button:hover.buttonWhite3 {background-color: var(--gold); color: var(--white); cursor: pointer;}

/* TEXT */

/* LINKS */
	a.linkWhite {color: var(--white); text-decoration: none;}
	a:visited.linkWhite {color: var(--white); text-decoration: none;}
	a:hover.linkWhite {color: var(--gold); text-decoration: none;}
	
	a.linkBlue {color: var(--blue); text-decoration: none;}
	a:visited.linkBlue {color: var(--blue); text-decoration: none;}
	a:hover.linkBlue {color: var(--black); text-decoration: none;}


/* LINKS */


/* HEADINGS */

	h1 {color: var(--blue); font-size: 38px; font-weight: 300;}
	h2 {color: var(--blue); font-size: 32px; font-weight: 300;}


/* HEADER */
	.headerWrapper {width: 100%; position: sticky; top: 0; background-color: var(--blue); height: 100px; min-height: 100px; z-index: 99999;}
	
	.headerContainer {width: 94%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 250px auto; grid-column-gap: 50px;}
	
		.headerLogo {width: 100%; margin: 15px 0 0 0;}
		img.imgLogo {width: 100%;}
	
	.headerRightTop {width: 100%; display: grid; grid-template-columns: auto auto; margin: 12px 0 0 0;}
		.headerSlogan {font-family: 'PT Serif', times new roman, serif; font-style: italic; font-size: 24px; color: var(--white); margin: 0 0 0 20px;}
		.headerRightTop-Menu {text-align: right; color: var(--white); font-size: 16px; margin: 0 0px 0 0;}
		.hamburger-Menu {text-align: right; color: var(--white) !important; font-size: 24px !important; margin: 10px 20px 0 0 !important;}
		
		.menuMain {margin: 4px 0 0 0;}
		
	.headerRightNav {width: 100%; display: grid; grid-template-columns: auto 200px;}
		.navCTA {text-align: right; float: right; margin: 5px 0 0 0;}
		
	.sectionheadWrapper {width: 100%; background: #fff url('images/sectionpic-bg.jpg') repeat-x top; height: 200px; min-height: 200px;}
	.sectionheadContainer {width: 94%; max-width: 1440px; margin: 0 auto; padding: 60px 0 0 0; font-size: 30px; color: var(--blue); display: grid; grid-template-columns: auto 1fr; grid-column-gap: 30px; align-items: center;}
	.sectionheadTitle {border-right: 1px solid var(--blue); padding: 20px 30px 20px 0;}
	
/* MENU CONTENT */

	.menu-content1 {display: none; width: 100%; padding: 50px 0; background-color: var(--ltgray); position: absolute; top: 100px; border: 2px solid var(--blue); z-index: 8888;}
	.menu-content1-container {width: 94%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 50px;}
	.menu-content-holder {text-align: center; color: var(--blue);}
	.menu-content-icon {font-size: 32px;}
	
	.menu-mobile {display: none; background-color: var(--blue); width: 100%; padding: 10px 20px 20px 20px; color: var(--white); top: 100px;position: sticky; z-index: 999999;}
	.menu-mobile-container ul {list-style-type: none; margin: 0 0 0 10px; padding: 0;}
	.menu-mobile-container ul li {list-style-type: none; margin: 5px 0 0 0; padding: 0;}
		
/* LAYOUT */
	.contentWrapper {width: 94%; margin: 100px auto; max-width: 1440px;}
	
	.pageDescription {width: 100%; text-align: center; font-size: 32px; line-height: 46px; color: var(--blue); font-weight: 200;}
	.separator {margin: 80px auto; text-align: center;}
	
	.contentContainer {width: 100%; display: grid; grid-template-columns: auto 320px; grid-column-gap: 80px;}
	.contentContainerFull {width: 100%;}
	
	.content {line-height: 38px; color: var(--ltblack); font-weight: 200; font-size: 24px;}
	
	.testimonialContainer {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 80px;}
	.testimonialColumn {}
	.testimonialHolder {background-color: var(--ltgray); padding: 30px; margin: 30px 0;}
	
	.content a {color: var(--red); text-decoration: none;}
	.content a:visited {color: var(--red); text-decoration: none;}
	.content a:hover {color: var(--green); text-decoration: none;}
	
	.photos-col3 {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 80px; margin: 40px 0;}
	.photos-col-image {width: 100%;}
	.photos-col-image img {width: 100%;}
	
	.requestFull {width: 100%;}
	.requestGrid {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 50px; margin: 50px 0;}
	
	.attorneyHolder {width: 100%; display: grid; grid-template-columns: 100px auto; grid-column-gap: 30px; align-items: center; margin: 0 0 30px 0;}
	.attorneyPhoto {width: 100%;}
	.attorneyPhoto2 {width: 80%;}
	.attorneyPhoto img {width: 100%;}
	
	.contentAttorney {width: 100%; display: grid; grid-template-columns: 240px auto; grid-column-gap: 80px;}
        .contentAttorney .sidebar-sticky { position: sticky; top: 120px; z-index: 888;}
        .sidebar-sticky .attorneyPhoto2 img {width: 100%;}
	
/* FRONT PAGE */
	/*.sliderWrapper {width: 100%; background: #fff url('images/slider-trials.jpg') no-repeat top; height: 700px; min-height: 700px;}*/
	.sliderWrapper {z-index: 555; width: 100%;}
	
	.sliderCTA {width: 90%; max-width: 1200px; margin: 0 auto; padding: 250px 0 0 0;}
	.sliderHeadline {color: var(--white); font-size: 42px;}
	.sliderDesc {color: var(--white);}
	
	.goldline {width: 100%; background-color: var(--gold); height: 5px; min-height: 5px; margin: 2px 0;}
	
	.frontSect2 {width: 100%; background: #fff url('images/sectionpic-bg.jpg') repeat top; min-height: 300px;}
	
	.frontSect2-Container {padding: 80px 0; margin: 0 auto; width: 94%; max-width: 1440px; text-align: center;}
	.frontSect2-Attorneys {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 80px; margin: 40px 0;}
	.frontSect2-Professionals {width: 100%; max-width: 680px; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 80px; margin: 40px auto;}
	.frontSect2-Attorney {text-align: center;}
	
	.frontSect2-Professional { text-align: center;}
	
	.attorneyPhoto3 {width: 80%; text-align: center; margin: 0 auto;}
	.attorneyPhoto3 img {width: 100%;}
	.frontAttorneyName {color: var(--blue); font-size: 28px; margin: 10px 0 0px 0;}
	
	.frontSect3 {width: 94%; max-width: 1440px; margin: 100px auto; display: grid; grid-template-columns: 3fr 1fr; grid-column-gap: 100px;}
	
	.frontSect3-Specializations {width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 50px; text-align: center; margin: 50px 0;}
	.frontSect3-Holder {text-align: center;}
	.frontSect3-Icon {color: var(--blue); font-size: 80px;}
	.frontSect3-Icon a {color: var(--blue); text-decoration: none;}
	.frontSect3-Icon a:hover {color: var(--gold); text-decoration: none;}
	.frontSect3-Name {color: var(--blue); font-size: 32px; margin: 20px 0;}

/* FOOTER */
	.footerTestimonials {width: 94%; max-width: 1000px; margin: 0 auto 100px auto; text-align: center; color: var(--gray); font-size: 28px; line-height: 42px;}
	
	.footerSubmitCase {width: 100%; text-align: center; background-color: var(--gold); padding: 80px 0; color: var(--white);}
	.footerSubmit-Title {font-size: 38px;}
	.footerSubmit-Desc {margin: 30px auto; width: 50%;}
	
	.footerWrapper {width: 100%; background-color: var(--gray); padding: 100px 0;}
	.footerContainer {width: 94%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 200px auto;}
	.footerLogoInfo {text-align: center; color: var(--white); font-size: 16px;}
	.footerCopyright {text-align: right; color: var(--white); font-size: 16px;}

/* Drop-down menus */
#dropmenu, #dropmenu ul {
	margin:0;
	padding:0;
	list-style-type:none;
	list-style-position:outside;
	position:relative;
	font-weight: 300;
	z-index: 6000;
}
#dropmenu a {
	color: #FFF;
	text-decoration: none;
	font-weight: 300;
}

#dropmenu li a.topnav {display:block; float:left; text-decoration:none; padding:0; cursor:pointer; font-size: 18px; padding: 10px 20px 16px 20px;}

#dropmenu li:hover a.topnav, #dropmenu a:hover.topnav {background-color: var(--gold); color: var(--blue);}

#dropmenu li a.topnav2 {display:block; float:left; text-decoration:none; padding:0; cursor:pointer; font-size: 18px; padding: 10px 20px 16px 20px; background-color: var(--gold);}

#dropmenu li:hover a.topnav2, #dropmenu a:hover.topnav2 {background-color: var(--white); color: var(--gold);}

#dropmenu li {
	float:left;
	position:relative;
	display:block;
}
#dropmenu ul {
	position:absolute;
	display:none;
	height:auto;
	border-bottom: 2px solid var(--blue);
}
#dropmenu ul a {
	color:#000;
	padding:0px;
}
#dropmenu ul a:hover {
	background-color: var(--gold);
	color: var(--white);
}
#dropmenu li ul {
	background: var(--gold);
	top:52px;
	float: left;
	padding: 0px;
	margin: 0px;
	width: 300px;
	border-right:0px solid #fff;
	border-left:0px solid #fff;
	border-bottom: 4px solid var(--blue);
	opacity: 1;
}

#dropmenu li ul li.current_page_item a {
	background: var(--gold);
	color: var(--white);
}

#dropmenu li ul li {
	border-top:0px solid #fff;
}

#dropmenu li ul a {
	width:260px;
	padding:10px 10px 6px 25px;
	font-size: 16px;
	float:left;
	font-weight: 300;
}

#dropmenu li ul a:hover {
	color: var(--white);
}

#dropmenu ul ul {
	top:auto;
}
#dropmenu li ul ul {
	left:175px;
	margin:0px 0 0 10px;
}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {
	display:none;
}
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {
	display:block;
}


@media screen and (min-width: 0px) and (max-width: 1400px) {

	@media screen and (min-width: 1200px) and (max-width: 1400px) {
	
		.menu-content1 {display: none;}
		
		.mobile-menu {display: none;}
		
		

	}
	
	@media screen and (min-width: 1024px) and (max-width: 1199px) {
	
		.menu-content1 {display: none;}
		
		.mobile-menu {display: none;}
		
		.headerContainer {width: 94%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 250px auto; grid-column-gap: 30px;}
		.headerRightTop {width: 100%; display: grid; grid-template-columns: auto auto; margin: 17px 0 0 0;}
		.headerSlogan {font-family: 'PT Serif', times new roman, serif; font-style: italic; font-size: 20px; color: var(--white); margin: 0 0 0 20px;}

	}
	
	@media screen and (min-width: 768px) and (max-width: 1023px) {
		
		
		
		@media screen and (min-width: 768px) and (max-width: 1023px) {
			
			.menu-content1 {display: none;}
			
			.headerContainer {width: 90%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 250px auto; grid-column-gap: 30px;}
			.headerRight {display: none;}
			
			.mobile-menu {float: right; text-align: right; font-size: 24px; margin: 25px 0 0 0;}
			
			.requestGrid {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-row-gap: 50px; grid-column-gap: 50px; margin: 50px 0;}
			
			.contentContainer {width: 100%; display: block; }
			
			
			
		}
		
		@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
		
			.menu-content1 {display: none;}
			
			.headerContainer {width: 90%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 250px auto; grid-column-gap: 30px;}
			.sectionheadContainer {width: 90%;}
			.headerRight {display: none;}
			
			.mobile-menu {float: right; text-align: right; font-size: 24px; margin: 25px 0 0 0;}
			
			.contentContainer {width: 100%; display: block; }
			
		
		}

	}
	
	@media screen and (min-width: 481px) and (max-width: 767px) {
		
		.menu-content1 {display: none;}
		
		.headerContainer {width: 90%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 250px auto; grid-column-gap: 30px;}
		.sectionheadContainer {width: 90%; max-width: 1440px; margin: 0 auto; padding: 60px 0 0 0; font-size: 20px; color: var(--blue); display: grid; grid-template-columns: auto 1fr; grid-column-gap: 30px; align-items: center;}
		.headerRight {display: none;}
			
		.mobile-menu {float: right; text-align: right; font-size: 24px; margin: 25px 0 0 0;}
		
		.contentWrapper {width: 90%; margin: 100px auto; max-width: 1440px;}
		.pageDescription {width: 100%; text-align: center; font-size: 24px; line-height: 34px; color: var(--blue); font-weight: 200;}
		
		.contentContainer {width: 100%; display: block; }
		
		.photos-col3 {display: block; margin: 20px 0;}
		.photos-col-image {width: 100%; max-width: 80%; margin: 20px auto;}
		
		.footerTestimonials {width: 90%; max-width: 1000px; margin: 0 auto 100px auto; text-align: center; color: var(--gray); font-size: 22px; line-height: 34px;}
		
		.contentAttorney {width: 100%; display: block; }
       	.contentAttorney .sidebar-sticky { position: default;}
    	.sidebar-sticky .attorneyPhoto2 img {width: 100%; max-width: 200px;}
    	
    	.content {line-height: 30px; color: var(--ltblack); font-weight: 200; font-size: 18px;}
    	
    	figure.alignright {float: none !important; margin: 20px auto !important;}
    	
    	.frontSect3 {width: 90%; max-width: 1440px; margin: 100px auto; display: block;}
    	.frontSect2-Attorneys {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 80px; margin: 40px 0; grid-row-gap: 40px;}
    	.frontSect3-Specializations {width: 100%; display: block; margin: 30px 0;}
    	.frontSect3-Holder {margin: 40px 0;}
    	
    	.footerContainer {width: 90%; max-width: 1440px; margin: 0 auto; display: block;}
    	.footerLogo {margin: 10px auto; width: 60%; max-width: 300px;}
    	.footerCopyright {text-align: center; margin: 30px 0;}
    	
    	.requestGrid {width: 100%; display: block; margin: 50px 0;}
    	.requestHolder {margin: 5px 0;}
		
	}
	
	@media screen and (min-width: 0px) and (max-width: 480px) {
		
		.menu-content1 {display: none;}
		
		.headerContainer {width: 90%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 250px auto; grid-column-gap: 30px;}
		.sectionheadContainer {width: 90%; max-width: 1440px; margin: 0 auto; padding: 60px 0 0 0; font-size: 20px; color: var(--blue); display: grid; grid-template-columns: auto 1fr; grid-column-gap: 30px; align-items: center;}
		
		.headerRight {display: none;}
		
		.contentWrapper {width: 90%; margin: 100px auto; max-width: 1440px;}
		.pageDescription {width: 100%; text-align: center; font-size: 24px; line-height: 34px; color: var(--blue); font-weight: 200;}
			
		.mobile-menu {float: right; text-align: right; font-size: 24px; margin: 25px 0 0 0;}
		
		.photos-col3 {display: block; margin: 20px 0;}
		.photos-col-image {width: 100%; max-width: 80%; margin: 20px auto;}
		
		.footerTestimonials {width: 90%; max-width: 1000px; margin: 0 auto 100px auto; text-align: center; color: var(--gray); font-size: 22px; line-height: 34px;}
		
		.contentAttorney {width: 100%; display: block; }
       	.contentAttorney .sidebar-sticky { position: default;}
    	.sidebar-sticky .attorneyPhoto2 img {width: 100%; max-width: 200px;}
    	
    	.content {line-height: 30px; color: var(--ltblack); font-weight: 200; font-size: 18px;}
    	
    	figure.alignright {float: none !important; margin: 20px auto !important;}
    	
    	.frontSect3 {width: 90%; max-width: 1440px; margin: 100px auto; display: block;}
    	.frontSect2-Attorneys {width: 100%; display: grid; grid-template-columns: 1fr; grid-column-gap: 80px; margin: 40px 0; grid-row-gap: 40px;}
    	.frontSect3-Specializations {width: 100%; display: block; margin: 30px 0;}
    	.frontSect3-Holder {margin: 40px 0;}
    	
    	.footerContainer {width: 90%; max-width: 1440px; margin: 0 auto; display: block;}
    	.footerLogo {margin: 10px auto; width: 60%; max-width: 300px;}
		.footerCopyright {text-align: center; margin: 30px 0;}
		
		.requestGrid {width: 100%; display: block; margin: 50px 0;}
		.requestHolder {margin: 5px 0;}
		
	}
	
}

@media screen and (min-width: 1401px) {

	.menu-content1 {display: none;}
	.mobile-menu {display: none;}
	
	
	
}