/*
	Theme Name: custom
	Theme URI: https://capefeardesign.com
	Description: Custom Responsive Layout
	Author: Brett Neville, Cape Fear Design
	Author URI: https://capefeardesign.com
	Version: 1.0.0
*/

@import 'https://fonts.googleapis.com/css?family=Maven+Pro:300,400,700,900|Open+Sans';

html { scroll-behavior: smooth; }
body { 
	font-family: 'Maven Pro', sans-serif;
 	color: #525252; margin: 0; overflow-x: hidden; 
 }

.fancy {
 font-family: "trajan-pro-3", serif; font-weight: 600;
font-style: normal;
}


/* ---------------------------------------
	= UTILITIES
-----------------------------------------*/
a { text-decoration: none; cursor: pointer; color: #525252;}
p { padding: 0 0 0; margin: 0 0 15px; line-height: 1.8; }

.alignright {float: right; }
.alignleft {float: left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto; }

.screen-shade { background: rgba(0,0,0,0.7); }

/* ---------------------------------------
	= TEXT STYLES
-----------------------------------------*/
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

h1,h2,h3,h4,h5,h6 { margin-top: 0; text-transform: uppercase;}

.caps { text-transform: uppercase; }
.no-margin { margin: 0; }

/* ---------------------------------------
	= IMG STYLES
-----------------------------------------*/
img { max-width: 100%; }
img.alignright {float: right; margin: 0 0 1em 1em; }
img.alignleft {float: left; margin: 0 1em 1em 0; }
img.aligncenter {display: block; margin-left: auto; margin-right: auto; }
.img-circle {border: 6px solid #fff; box-shadow: 2px 2px 10px #999; }

/* ---------------------------------------
	  = Responsive Embed
-----------------------------------------*/
.embed-container{position:relative;padding-bottom:56.25% !important;height:0;overflow:hidden;max-width:100%;}
.embed-container iframe, .embed-container object, .embed-container embed, .embed-container video{position:absolute;top:0;left:0;width:100%;height:100%;}

/* ---------------------------------------
	  = BUTTONS
-----------------------------------------*/
.btn {padding: 15px 25px;display: inline-block;max-width: 250px;margin: 0 auto;font-weight: 900;text-transform: uppercase;color: #fff;margin-top: 15px; border-radius: 2px;}


/* ---------------------------------------
	= TRANSITION
-----------------------------------------*/
.ease {-webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; }

/* ---------------------------------------
	= PADDING CLASSES
-----------------------------------------*/
.pad5 { padding: 5px 0; }
.pad15 { padding: 15px 0; }
.pad30 { padding: 30px 0; }
.pad45 { padding: 45px 0; }
.pad60 { padding: 60px 0; }
.pad75 { padding: 75px 0; }
.pad90 { padding: 90px 0; }
.pad120 { padding: 120px 0; }
.pad240 { padding: 240px 0; }
.wrapper { padding: 0 15px; }

/* ---------------------------------------
	= GRID STYLES
-----------------------------------------*/
.grid {display: grid; grid-gap: 15px;}
.grid div {padding: 15px;}
.c-1 {grid-template-columns: repeat(1,1fr);}
.c-2 {grid-template-columns: repeat(2,1fr);}
.c-3 {grid-template-columns: repeat(3,1fr);}
.c-4 {grid-template-columns: repeat(4,1fr);}
.c-1-2 {grid-template-columns: 33% 66%;}
.c-1-3 {grid-template-columns: 25% 74%;}
.c-2-1 {grid-template-columns: 66% 33%;}
.c-3-1 {grid-template-columns: 75% 24%;}

.c-40-60 {grid-template-columns: 40% 59%;}
.c-60-40 {grid-template-columns: 60% 39%;}

.container { max-width: 1200px; margin: 0 auto; }
.container-wide { margin: 0 15px; }


/* ---------------------------------------
	  = COLORS
-----------------------------------------*/
.light-grey { background: #ebebeb; }
.dark-grey { background: #4a4c4c; }
.white { background: #fff; }
.blue { background: #32c6f7; }
.mint { background: #67D2DF; }
.steel { background: #71797E; }
.red { background: #dd060e; }
.green { background:#226f56; }
.brown { background: #786408 }

.white-text { color: #fff; }
.steel-text { color: #71797E; }
.mint-text { color: #67D2DF; }
.green-text { color: #226f56 }
.brown-text { color:#786408 }

/* ---------------------------------------
	  = HEADER
-----------------------------------------*/
#header { background: #cdcdcd; color: #fff; }

#top-contact { text-align: right; } 
#top-contact i, #top-contact svg { margin-right: 10px }
#top-contact a { color: #fff; }
#top-contact a:focus, #top-contact a:hover { color: #00a9d0; }

#navigation { background: #fff;  }

#rotator h1 {
	color: #fff;
	font-size: 62px; line-height: 0.9;font-weight: 900;
	text-transform: uppercase;margin-bottom: 10px;
	text-shadow: 5px 4px 10px #0e0e0e;
}
#rotator p {
	color: #fff;
	font-size: 24px; line-height: 1.2;font-weight: 700;
	margin-bottom: 0;
	text-shadow: 5px 4px 10px #0e0e0e;
}


#rotator .rotator-message {padding:250px 0;}
#rotator .interior-title {padding:200px 0;}
	#rotator .interior-title h1 { font-size: 38px; }

#rotator span a { color: rgba(0, 169, 208,0.7); font-size: 60px; }
	#rotator span a:hover { color: rgba(0, 169, 208,0.99); }

/* ---------------------------------------
	  = BANNER MESSAGE
-----------------------------------------*/
#banner-message {
	color: #fff;
	font-size: 20px;
}

#banner-message p { margin: 0; font-weight: 700; line-height: 1.2;}
#banner-message a { color: #fff; }

/* ---------------------------------------
  = Breadcrumb Navigation
-----------------------------------------*/

#breadcrumbs {
  list-style: none;
  padding: 10px 15px;
  overflow: hidden;
  background: #eee;
  margin-top: 0;
}
#breadcrumbs li {
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  font-size: 12px;
  text-transform: uppercase;
}
#breadcrumbs .separator {
  font-size: 11px;
  font-weight: 300;
  color: #777;
}


/* ---------------------------------------
	  = INTRO
-----------------------------------------*/
#intro {  }
#intro h3 { font-size: 34px; margin-bottom: 10px;}
#intro .btn { margin-top: 0px; }


#quick-services { background: url('../img/swirl.jpg'); padding-bottom: 30px; }
	#quick-services h3 {margin-top: 10px; margin-bottom:  5px;color: #52575a;}
	#quick-services h2 { margin: 0px; color: #a91e26; font-size: 34px;}
	#quick-services a { color: #52575a;}
	#quick-services aside:hover { opacity: 0.8; }




/* ---------------------------------------
	  = MAIN CONTENT
-----------------------------------------*/
#mainContent {  }



/* ---------------------------------------
	= RESPONSIVE STYLES
-----------------------------------------*/
@media (max-width: 992px) {
	.c-4 {grid-template-columns: repeat(2,1fr); }
	#rotator .rotator-message {
    padding: 120px 0;
	}
	#rotator h1 {
    font-size: 48px;
  }
}

@media (max-width: 767px) {
	.c-2, .c-3, .c-4, .c-2-1, .c-1-2, .c-1-3, .c-3-1, .c-40-60, .c-60-40 {grid-template-columns: repeat(1,1fr); }

	.c-60-40 div:nth-of-type(1){
		order: 2;
	}
	.c-60-40 div:nth-of-type(2){
		order: 1;
	}
	#rotator .rotator-message {
    padding: 60px 0;
	}
	#rotator h1 {
    font-size: 38px;
  }
  #rotator img {
    max-width: 300px; height: auto;
  }


	#footer-top, #footer-top .text-right, #footer-bottom, #copyright, #copyright .text-right, .c-40-60, .c-60-40 { 
		text-align: center; 
	}
	#footer ul li { list-style-type: none;}
}