/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url('/wp-content/themes/petrellilaw/font/opensans/open-sans-v18-latin-300italic.woff2') format('woff2'), 
       url('/wp-content/themes/petrellilaw/font/opensans/open-sans-v18-latin-300italic.woff') format('woff'); 
}

/* HERO BANNER */

.hero {
	background: url(/wp-content/themes/petrellilaw/img/banner.webp) no-repeat top right;
	background-size: auto 100%;
	padding: 1px 0;
	position: relative;
}
.no-webp .hero {
	background: url(/wp-content/themes/petrellilaw/img/banner.jpg) no-repeat top right;
}
.hero::after {
	background: #aa8947;
	bottom: -50px;
	content: '';
	height: 100px;
	left: 50%;
	position: absolute;
	width: 4px;
	z-index: 999;
}
	.hero .banner-box {
		background:  rgba(3,28,35,0.9);
		color: #fff;
		margin: 100px 0;
		max-width: 40%;
		padding: 60px 100px;
		width: 100%;
	}
	.hero .banner-box::after {
		clear: both;
		content: ' ';
		display: block;
	}
		.banner-box h1 {
			font-size: 85px;
			margin: 20px 0;
		}
		.banner-box p {
			font-size: 30px;
		}
		.banner-box .btn-banner-wrapper {
			display: block;
			position: relative;
			margin: 80px -140px 40px 0;
		}
		.banner-box .btn-banner-cta::before {
			background: #aa8947;
			content: '';
			display: block;
			height: 5px;
			left: 0;
			position: absolute;
			top: 50%;
			width: 300px;
			z-index: 999;
		}		
			.banner-box .btn-banner-wrapper .btn-banner-cta:link,  .banner-box .btn-banner-wrapper .btn-banner-cta:visited {
				background: #169898;
				box-sizing: border-box;
				color: #fff;
				display: block;
				font-size: 22px;
				margin-left: 160px;
				padding: 20px 70px 20px 200px;
				text-align: center;
				text-transform: uppercase;
			}
			.banner-box .btn-banner-wrapper .btn-banner-cta:hover {
				background: #fff;
				color: #169898;
			}

/* ABOUT */

.about {
	box-sizing: border-box;
	color: #0b3039;
	padding: 100px 40px;
	width: 100%;
}
	.about > * {
		max-width: 1300px;
		margin: 45px auto;
		text-align: center;
	}
	.about .section-title {
		font-family: 'Gelasio', Serif;
		font-size: 70px;
		font-weight: 700;
		text-align: center;
	}
	.about .section-subtitle {
		display: block;
		font-family: 'Open Sans', sans-serif;
		font-size: 32px;
		font-style: italic;
		font-weight: 300;
		text-align: center;
	}
	.about a:link, .about a:visited {
		color: #169897;
		display: inline-block;
		font-size: 22px;
		font-weight: 600;
		position: relative;
	}
	.about a.line-ends {
		padding-left: 120px;
		padding-right: 120px;		
		text-transform: uppercase;
	}
		.about a.line-ends::before {
			background: #169897;
			content: '';
			height: 1px;
			position: absolute;
			width: 80px;
			top: 50%;
			left: 0;
		}
		.about a.line-ends::after {
			background: #169897;
			content: '';
			height: 1px;
			position: absolute;
			width: 80px;
			top: 50%;
			right: 0;
		}
	#about_content {
		display: none;
	}

/* OUR ATTORNEYS */
.our-attorneys {
	background: rgb(248, 249, 253);
	padding: 1px 0;
}
	.our-attorneys .section-title {
		font-family: 'Open Sans', sans-serif;
		font-size: 32px;
		font-weight: 700;
		margin: 100px auto 50px 0;
		padding: 40px 0;
		text-align: center;
		text-transform: uppercase;
	}
	.our-attorneys .section-cta {
		background: #169897;
		color: #fff;
		display: block;
		font-size: 20px;
		font-weight: 700;
		margin: 150px auto 200px auto;
		max-width: 550px;
		padding: 40px 60px;
		position: relative;
		text-align: center;
		text-transform: uppercase;
	}
	.our-attorneys .section-cta::after, .our-attorneys .section-cta::before {
		background: #ab8940;
		content: '';
		display: block;
		height: 5px;
		max-width: 350px;
		position: absolute;
		top: 50%;
		width: 100%;
	}
	.our-attorneys .section-cta::before {
		right: 550px;
	}
	.our-attorneys .section-cta::after {
		left: 550px;
	}	
	.attorneys {
		box-sizing: border-box;
    	display: flex;
    	flex-wrap: wrap;
    	justify-content: space-evenly;
    	width: 100%;
	}	
		.attorney .attorney-info {
			padding: 20px 0;
			text-align: center;
		}
		.attorney .attorney-name{
			color: #002935;
			display: block;
			font-family: 'Gelasio', serif;
			font-size: 26px;
			font-weight: bold;
		}
			.attorney-name::after {
			    background: #ab8940;
			    content: '';
			    display: block;
			    height: 5px;
			    margin: 5px auto;
			    width: 100px;		
			}
		.attorney .attorney-design {
			display: block;			
			font-size: 20px;
			text-transform: uppercase;
		}

/* OUR CLIENTS */
.clients-section {
	background: #002935;	
}
.our-clients {
	box-sizing: border-box;
	color: #fff;
	margin: 0 auto;
	overflow: auto;
	padding: 170px 0 100px 100px;
	position: relative;
	z-index: 1;
}
	.testimonials-cta:link, .testimonials-cta:visited {
		color: #ab8940;
		display: block;
		font-family: 'Gelasio', serif;
		font-size: 16px;
		font-style: italic;
		margin-left: 25px;
	}
	.testimonials-cta::after {
		content: '\00BB';
		margin-left: 10px;
	}
	.aboutus {
		background: url(/wp-content/themes/petrellilaw/img/bg-aboutus.webp) no-repeat bottom right;
		background-size: cover;
		float: right;
		margin: 50px 0;
		max-width: 800px;
		min-height: 600px;
		position: relative;
		width: 100%;
	}
	.no-webp .aboutus {
		background: url(/wp-content/themes/petrellilaw/img/bg-aboutus.jpg) no-repeat bottom right;
	}	
	.aboutus::after {
		background: #169897;
		bottom: -40px;
		content: ' ';
		display: block;
		left: 170px;
		position: absolute;
		right: 0;
		top: -50px;
		z-index: -1;
	}
		.about-info {
			background: #fff;
			bottom: 0;
			color: #002935;
			font-family: 'Gelasio', Serif;
			font-size: 34px;
			max-width: 55%;
			padding: 30px 50px 50px 80px;
			position: absolute;
			left: -40px;
		}
			.about-info p {
				border-left: 5px solid #169897;
				padding-left: 20px;
			}
			.about-info img {
				display: inline-block;
				vertical-align: middle;
			}
		.about-cta:link, .about-cta:visited{
			color: #fff;
			display: block;
			background: #169897;
			bottom: -40px;
			left: 0;
			padding: 20px 50px;
			position: absolute;
			right: 0;
			text-transform: uppercase;
		}
		.about-cta::after {
			background: #ab8940;
			content: '';
			display: block;
			height: 4px;
			max-width: 30%;
			position: absolute;
			right: 0;
			top: 50%;
			width: 100%;
		}
	.clients {
		clear: both;
		display: flex;
		flex-basis: 100%;
		gap: 20px;
		justify-content: space-around;
		margin: 100px 100px 0 auto;
		overflow: auto;
	}
	.clients a {
		align-self: center;
		flex-shrink: 1;
	}	
@media only screen and (min-width:  1919.5px) {
	.our-clients {
		max-width:  1919px;
	}	
}
@media only screen and (max-width:1919.5px){
    .hero .banner-box {
      	max-width: 32%;
    }
    	.banner-box h1 {
    		font-size: 60px;
    	}
    	.banner-box p {
    		font-size: 26px;
    	}
    .banner-box .btn-banner-wrapper .btn-banner-cta:link, .banner-box .btn-banner-wrapper .btn-banner-cta:visited {
    	font-size: 21px;
      	margin-left: 90px;
      	padding: 20px 30px 20px 90px;
    }
    .banner-box .btn-banner-cta::before {
      	width: 160px;
    }
    .practice .practice-cta::after {
      	width: 230px;
    }
	.aboutus {
		max-width: 650px;
	}
	.about-cta::after {
		display: none;
	}
}


@media only screen and (max-width:1600.5px){
	.hero .banner-box {
		max-width: 30%;
	}
		.banner-box h1 {
			font-size: 40px;
		}
		.banner-box p {
			font-size: 20px;
		}
		.banner-box .btn-banner-wrapper { 
			margin: 40px -140px 40px 0; 
		}
	    .banner-box .btn-banner-wrapper .btn-banner-cta:link, .banner-box .btn-banner-wrapper .btn-banner-cta:visited {
    		font-size: 16px;
    	}
    .banner-box .btn-banner-cta::before {
      	width: 150px;
    }
	.practice .practice-cta {
		margin-top: 100px; 
	}    
	.practice .practice-cta::after {
		width: 120px;
	}
	.aboutus {
		max-width: 550px;
	}
		.about-info {
			max-width: 80%;
		}
		.about-cta {
			font-size: 20px;
		} 
}

@media only screen and (max-width:1365.5px){
    .hero .banner-box {
      	margin: 70px 0;    
      	padding: 40px 80px;
    }
		.banner-box h1 {
			font-size: 37px;
		}
		.banner-box p {
			font-size: 18px;
		}
		.banner-box .btn-banner-wrapper { 
			margin: 40px -140px 30px 0; 
		}
	    .banner-box .btn-banner-wrapper .btn-banner-cta:link, .banner-box .btn-banner-wrapper .btn-banner-cta:visited {
    		font-size: 16px;
    		margin-left: 50px; 
    		padding: 20px 10px 20px 50px;
    	}
	    .banner-box .btn-banner-cta::before {
	      	width: 90px;
	    }
    .practice .practice-cta::after {
      	width: 70px;
    }
}

@media only screen and (max-width:1279.5px){
	.practice-box {
		margin-right: 100px;
		max-width: 100%;
	}
	.practice-areas {
		margin: -100px auto 0 auto;
		position: relative;
		right: unset;
		top: unset;
		width: 70%;
	}
	.practice .practice-cta {
		padding-left: 40px;
		padding-right: 40px;
		text-align: center;
	}
		.practice .practice-cta::after {
			margin-left: 0;
			width: 50%;
		}
	.our-attorneys .section-cta::after {
		left: 500px;
	}    
	.our-attorneys .section-cta::before {
		right: 500px;
	}
	.our-clients {
		padding: 60px 0;
	}
	.aboutus {
		max-width: 800px;
	}
	.about-cta::after {
		display: block;
	}
	.clients {
		margin-left: 100px;
	}
}

@media only screen and (max-width:1039.5px){ 
	.hero .banner-box {
    	margin: 40px 0;
		max-width: 40%;
		min-height: 437px;
    	padding: 10px 20px 10px 60px;
	}
		.banner-box .btn-banner-wrapper {
			margin: 20px 0;
		}
		.banner-box .btn-banner-wrapper .btn-banner-cta:link, .banner-box .btn-banner-wrapper .btn-banner-cta:visited {
			margin-left: 0; 
			padding: 10px;
		}
	    .banner-box .btn-banner-cta::before {
	      	display: none;
	    }

	.our-attorneys .section-cta {
		margin: 50px auto;
	}
	.our-attorneys .section-cta:before, .our-attorneys .section-cta:after {
		display: none;
	}
	.clients {
		flex-wrap: wrap;
	}      
}

@media only screen and (max-width:982.5px){ 
	.hero .banner-box {
		min-height: unset;
	}
}

@media only screen and (max-width:864.5px){ 
	.hero .banner-box {
		margin: 20px 0;
	}
	.attorneys {
		padding: 0 40px;
	}
}

@media only screen and (max-width:799.5px){ 
	.hero .banner-box {
		margin: 30px 0;
	}
		.hero .banner-box h1{
			font-size: 30px;
		}
		.hero .banner-box p {
			font-size: 16px;
		}
		.banner-box .onlyin-desktop {
			display: none;
		}
		.banner-box .btn-banner-wrapper .btn-banner-cta:link, .banner-box .btn-banner-wrapper .btn-banner-cta:visited {
			margin-left: 0;
			padding-left: 0;
		}
		.banner-box .btn-banner-wrapper .btn-banner-cta::before {
			display: none;
		}
	.about .section-title {
		font-size: 60px;
	}   
	.practice-areas {
		width: 60%;
	}
		.practice-areas li {
			flex-basis: 100%;
		}   
			.practice-areas a:link, .practice-areas a:visited {
				margin: 0 0 5px 0;
			}
	.about-info {
		max-width: unset;
	}
		.about-info p {
			font-size: 25px;
		}
		.about-info img {
			max-width: 80%;
		}
	.about-cta:link, .about-cta:visited{
		font-size: 16px;
		padding: 20px; 
	}
	.about-cta::after {
		display: none;
	}
	.clients {
		margin-left: 40px;
		margin-right: 40px;
	}
}
@media only screen and (max-width:699.5px){ 
	.row.hero {
    	background-image: none;
    	background: #1C3239;
	}
		.row.hero:before {
		    background: url(/wp-content/themes/petrellilaw/img/banner.webp) no-repeat top right 0;
		    background-size: 130vw auto;
		    content: ' ';
		    display: block;
		    width: 100vw;
		    height: 320px;
		}	
		.no-webp .row.hero:before {
		    background: url(/wp-content/themes/petrellilaw/img/banner.jpg) no-repeat top right 0;
		}		
		.hero .banner-box {
		    background: #1C3239;
		    box-sizing: border-box;
		    margin-top: 0;
		    max-width: none;
		    padding-right: 60px;
		    width: 100% !important;
		}
}
@media only screen and (max-width: 599.5px) {
	.row.hero:before {
    	background-size: 150vw auto;
    	height: 300px;
	}
}
@media only screen and (max-width:540.5px){ 
    .hero {
      	background-image: none;
    }
	    .hero .banner-box {
	      padding: 20px 40px;
	    }
			.banner-box h1 {
				font-size: 50px;
			}
			.banner-box p {
				font-size: 24px;
			}
			.banner-box .btn-banner-wrapper .btn-banner-cta:link, .banner-box .btn-banner-wrapper .btn-banner-cta:visited {
				font-size: 14px;
			}
	.about .section-title {
		font-size: 45px;
	}
		.about a:link, .about a:visited {
			padding-left: inherit;
			padding-right: inherit;
		}
		.about a.line-ends::before, .about a.line-ends::after {
			display: none;
		}
	.practice-box {
		margin: 0 40px;
		padding: 40px;
	}
	.practice-box > p {
		margin: 30px auto;
	}
	.practice .section-title {
		font-size: 40px;
	}
	.practice .practice-cta {
		margin: 100px -40px;
	}
	.practice-areas {
		width: 100%;
	}
		.practice-areas li {
			flex-basis: 100%;
		}   
	.our-attorneys .section-title {
		margin: 50px 0 0 0;
	}

}
@media only screen and (max-width: 499.5px) {
	.row.hero:before {
    	background-size: 150vw auto;
    	height: 260px;
	}
}
@media only screen and (max-width: 399.5px) {
	.row.hero:before {
    	background-size: 170vw auto;
    	height: 250px;
    	background-position: top right;
	}
}