/*
Theme Name: Edge Landscaping &amp; Brickwork
*/  


/* Text */
@font-face {
  font-family: bison;
  src: url('css/Bison-Bold.ttf');
}

@font-face {
  font-family: cooper;
  src: url('css/CooperHewitt-Light.otf');
}

@font-face {
  font-family: cooper-bold;
  src: url('css/CooperHewitt-Bold.otf');
}

@font-face {
  font-family: cooper-bold-ish;
  src: url('css/CooperHewitt-Semibold.otf');
}

a{
	color: #5B8C5A !important
}

a:hover{
	text-decoration:none;
}

h1{
	font-family:bison;
	font-size:3.5rem
}

.text-small{
	font-size:0.9rem;
}

.text-smaller{
	font-size:0.8rem;
}

.text-larger{
	font-size:1.3rem;
}

.bold-cooper{
	font-family: cooper-bold;
}

.bold-ish-cooper{
	font-family: cooper-bold-ish;
}

.text-purple{
	color: #552244 !important
}

.text-green{
	color: #5b8c5a !important
}

.hover-purple:hover{
	color: #552244 !important
}

.bison{
	font-family:bison;
}

.underline-thick{
	text-decoration:underline;
	text-decoration-thickness: 5px;
}

@media (min-width: 992px) and (max-width: 1199px){
	h1{
		font-size: 3rem;
	}
	
	h2{
		font-size: 1.5rem;
	}
}

@media (max-width: 991px) {
	.text-left-mobile{
		text-align:left !important
	}
	
	.text-align-center-mobile{
		text-align:center !important
	}
}





/* Header */
#header-bar{
	position:absolute;
	top:50px;
}

#header-logo{
	width:300px;
}

.header-links { 
	display: flex;
	display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  align-items: center;
  justify-content: right;
}

 #header-banner-text{
	z-index:1;
	bottom: 75px;
	display: flex;
	display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  align-items: center;
  justify-content: center;
}

#header-banner-inner{
	overflow:hidden
}

@media (max-width: 991px) {
	#header-bar{
		top:0px;
	}
	
	#header-banner .line-block{
		bottom: 1rem
	}
}


@media (min-width: 992px) {
	#header-banner-inner{
		height:500px;
	}
	
	#header-banner-text{
		left: 4rem;
	}
}






/* Menu */
.submenu{
	display:none;
}

@media (min-width: 992px) {	
	.submenu{
	   padding-top:20px;
	   top:20px;
	}

	.main-menu li:hover > ul{
		display:block;
	}
}

@media (max-width: 991px) {	
	#menu-container{
		width:100%;
		background-color: white;
		position: fixed;
		top: 0;
		left: 0;
		z-index:1000;
		display:none;
		justify-content:center;
		align-items: center;
	}
	
	#menu-container nav{
		height:400px;
	}

	nav ul{
		text-align: center;
		display: inline-block;
		width: 100%;
		vertical-align: middle;
	}
}





/* Widths/Heights */
.w-30px{
	width:30px;
}

.w-150px{
	width:150px;
	height:150px;
}
.w-200px{
	width:200px;
}

.w-33{
	width:33.33%
}

.h-150px{
	height:150px
}

.h-350px{
	height:350px
}

.w-50-2{
	width:calc(50% - 0.5rem)
}

@media (max-width: 991px) {
	.gallery-image{
		width:100% !important;
		height:300px
	}
	
	.gallery-image.h-350px{
		margin-left:0px !important;
		margin-right:0px !important;
	}
	
	.gallery-image.h-150px{
		margin-left:1rem !important;
		margin-right:1rem !important;
	}
	
	.h-150px{
		height:300px
	}
}
	

@media (max-width: 991px) {
	.w-50px-mobile{
		width:50px;
	}
	
	.w-150px{
		height:100px;
		width:auto;
	}
	
	.h-100-mobile{
		height:100% !important
	}
	
	.w-100-mobile{
		width:100%! important
	}
}





/* Containers */
body {
  font-family:cooper;
}

main {
  flex: 1 0 auto;
}
footer {
  flex-shrink: 0;
}

.wide-container{
	margin: 0px auto;
}

.wide-container{
	width: 80%;	
}


@media (max-width: 1199px){
	main.container{
		max-width:100%
	}
}

@media (max-width: 1999px){
	.wide-container{
		width: 100%;
	}
}



/* Positioning */
.top-0{
	top:0px
}

.bottom-0{
	bottom:0px
}

.right-0{
	right:0px;
}

.left-corner{
	top:10px;
	left:10px;
}

.top-115{
	top:115px;
}

.top-40{
	top:40px;
}

.absolute-center-hor{
	left: 50%;
	transform: translate(-50%);
}

.w-45{
	width:45%
}


@media (min-width: 992px) {
	.position-absolute-desktop{
		position:absolute !important
	}
}

@media (max-width: 991px) {
	.position-absolute-mobile{
		position:absolute !important
	}
}




/* Carousels */
#carousel-text{
	z-index:1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-top: 75px;
}

.carousel-indicators li {
  width: 15px;
  height: 15px;
  margin: 0px 10px;
  border-radius: 100%;
  opacity:1
}

.carousel-indicators li.active{
	background-color: #552244 	
}

#testimonials-carousel .carousel-indicators li{
	background-color: #552244 	
}

#testimonials-carousel .carousel-indicators li.active{
	background-color: white 	
}

@media (min-width: 992px) and (max-width: 1199px){
	#carousel-text{
		width:95%
	}
}

@media (max-width: 991px) {
	#carousel-text{
		margin-top:0px;
		width:calc(100% - 20px)
	}
	
	#carousel-text h1{
		font-size:2.5rem
	}
	#carousel-text h2{
		 display:none
	}
}

@media (max-width: 399px) {
	#carousel-text h1{
		font-size:2rem
	}
	
	.carousel-button{
		display:none !important
	}
}





/* Contact Form */
.wpcf7, .wpcf7-form{
	display:flex;
	width:100%;
	flex-direction:column
}

.wpcf7-form textarea, .wpcf7-form input{
	width:100%;
	border: none;
	padding:10px;
}

textarea{
	resize:none;
}

.wpcf7-form .wpcf7-submit{
	padding: 10px;
	background-color: white;
	font-weight:bold;
	font-size:1.25rem;
	width: 150px;
	border:none;
}

.wpcf7-submit:hover{
	background-color:#552244;
	color: white;
}


#message-col{
	padding: 7px 10px;
}




/* Backgrounds/Borders */
.brick-bg{
	background: 
    linear-gradient(
      rgba(91,140,90, 0.9), 
      rgba(91,140,90, 0.9)
    ),
    url(media/brick-bg.jpg);
}

.pebble-bg{
	background: 
    linear-gradient(
      rgba(245,245,245, 0.9), 
      rgba(245,245,245, 0.9)
    ),
    url(media/pebble-bg.jpg);
}

.purple-line, .purple-bg{
	background-color:#552244;
}

.green-bg{
	background-color: #5b8c5a
}

.yellow-line, .yellow-bg, .yellow-bg-hover:hover{
	background-color: #CFD186 !important
}

.white-line{
	border-bottom: 10px solid white;
}

.line-block{
	padding:2rem;
	position:absolute;
	width:75%
}

.longer-line-block{
	width:90%;
}

.line-block-top{
	top:-2rem;
}

.line-block-bottom{
	bottom:-2rem;
}

.line-block-right{
	right:0px;
}

.line-block-left{
	left:0px;
}

.border-thick{
	border: 10px solid black;
}

.yellow-overlay{
	background: linear-gradient( rgba(236,233,12, 0.3), rgba(236,233,12, 0.3) );
}

@media (max-width: 1119px){
	main.pebble-bg{
		background: none;
	}
}

@media (min-width: 1200px){
	body.pebble-bg{
		background: none;
	}
}

@media (min-width: 1200px) and (max-width: 1499px){
	.longer-line-block{
		width: 98%
	}
}

@media (max-width: 991px) {
	.line-block{
		padding:1rem;
	}
	
	.line-block-top{
		top:-1rem;
	}

	.line-block-bottom{
		bottom:-1rem;
	}
	
	.white-line{
		top: 90px;
	}
}





/* Spacing */
.mx-7{
	margin-left: 7rem;
	margin-right:7rem;
}

.pb-4-2{	
	padding-bottom: 2.2rem !important
}

.no-container-margin{
	margin:0px -15px;
	max-width: calc(100% + 30px);
	width: calc(100% + 30px);
}

.mb--2{
	margin-bottom:-2rem !important
}

.mb-4-5{
	padding-bottom: 2rem !important;
}

.pb-6{
	padding-bottom: 3.5rem !important;
}

@media (min-width: 992px) {
	.px-5-desktop{
		padding-left: 3rem !important;
		padding-right: 3rem !important;
	}
}

@media (max-width: 991px) {
	.my-6-mobile{
		margin: 3.5rem 0px !important
	}
	
	.my-5-mobile{
		margin: 3rem 0px !important
	}

	.my-3-mobile{
		margin: 3rem 0px !important
	}
	
	.pr-3-mobile{
		padding-right: 3rem !important
	}
	
	.my-0-mobile{
		margin: 0px !important
	}
	
	.py-1-mobile{
		padding-top: 0.25rem !important;
		padding-bottom: 0.25rem !important;
	}
	
	.px-0-mobile{
		padding-left: 0rem !important;
		padding-right: 0rem !important;
	}
	
	.p-0-mobile{
		padding: 0px !important
	}
	
	.m-0-mobile{
		margin: 0px !important
	}
	
	.mt-3-mobile{
		margin-top: 1rem !important
	}
	
	.my-5-mobile.h-100-mobile{
		height:calc(100% - 6rem) !important
	}
}




/* Specific Pages */
@media (max-width: 400px){
	footer a{
		font-size:0.8rem;
	}
}

#quote-image-left{
	left: -70px;
	top: -25px;
}

#quote-image-right{
	right: -70px;
	bottom: -0px;
}

.quote-images{
	width:100px;
	opacity: 0.15;
	position: absolute;
}

.gallery-image{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.service-col{
	background-size:cover !important;
}



/* Misc */
.d-flex{
	display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
}

.list-style-none{
	list-style: none
}

.cursor-pointer{
	cursor: pointer;
}

.rounded-more{
	border-radius:0.5rem
}

.rounded-further-more{
	border-radius:2rem
}

.z-index-1{
	z-index:1;
}




@media (min-width: 992px) {
	.d-inline-flex-desktop{
		display: inline-flex !important 
	}
}



@media (max-width: 991px) {
	.justify-content-end-mobile{
		justify-content:end !important
	}
	
	.d-block-mobile{
		display:block !important
	}
	
	.d-flex-mobile{
		display:flex !important
	}
	
	.d-none-mobile{
		display:none !important
	}

	.flex-column-mobile{
		flex-direction:column !important
	}

	.align-items-center-mobile{
		align-items:center !important
	}

	.image-and-text-section {
		flex: 1 1 100%;
	}
	
	.images-on-right-mobile{
		order: 2;
	}
	
	.text-on-left-mobile{
		order: 1;
	}

}


