/** LOAD FONTS **/
@import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900);

@font-face {
    font-family: 'avantgardelt-extralight';
    src: url('/fonts/avantgardelt-extralight.eot');
    src: url('/fonts/avantgardelt-extralight.eot?#iefix') format('embedded-opentype'),
         url('/fonts/avantgardelt-extralight.woff') format('woff'),
         url('/fonts/avantgardelt-extralight.ttf') format('truetype'),
         url('/fonts/avantgardelt-extralight.svg#avantgardelt-extralight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'weather';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/** GENERAL (shared) **/

	body {
		width: 100%;
		padding-top: 50px;
	}

	html {
		width: 100%;
	}

	.affix{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}

	.nowrap {
	  white-space: nowrap ;
	}

	.caption {
	    font-family: "lato-regular", arial;

	}

	.caption h3 {
	    font-family: "avantgardelt-extralight", arial;

	}

	.jumbotron .thumbnail .caption {
		font-size: 80%;
	}

	.center {
		text-align: center;
	}

	h1, h2, h3 {
	font-family: 'Raleway', sans-serif;
		font-weight: 500;
	}

	.bold {
		font-weight: 800;
	}

/** End - GENERAL (shared) **/

/** SECTIONS (shared) **/

	.section {
		margin: 0px;
		border: 0px;
		position: relative;
	}

	.section-top {
		margin: 0px;
		border: 0px;
		background: #f7e593;
	}

	.section-gray {
		background-color:#dee2e3 ;
	}

	.section-blue {
		background-color:#d2e3f6;
	}

	.section-content {
		position: relative;
		top: -60px;
		padding-top: 100px;
		margin-top: -100px;
	}

	.thumbnail-title {
		font-size: 22pt;
		font-weight: 500;
		line-height: 85%;
	}

	.thumbnail-subtitle {
		font-size: 15pt;
		font-weight: 200;
		color: #999999;
	}

	.thumbnail-photo {
		margin-top: 27px;
		margin-bottom: 27px;
	}

	.thumbnail-header {
		font-size: 22pt;
		font-weight: 500;
		text-align: center;
		background-color: #7188a2;
		color: #ffffff;
		position: relative;
		margin-top: 5px;
		height: 45px;
		line-height: 45px;
		cursor: pointer;
		cursor: hand;
	}

	.thumbnail-shell {
		background-color: rgba(255,255,255,0.62);
		border: 0px;
		border-radius: 0px;
		margin-bottom: 0px;
		margin-top: 0px;
		padding: 0px;
		cursor: pointer;
		cursor: hand;
	}

	.thumbnail-content {
		height: 100%;
		width: 100%;
		position: relative;
		margin: 0px;
		padding: 0px;
	}


	.thumbnail-banner:before {
	    content: '';
	    position: absolute;
	    top: 0; left: 0;
	    border-bottom: 100px solid transparent;
	    border-left: 100px solid #DBA24D;
	    width: 0;
	}

	.thumbnail-banner-text {
		background-color: transparent;
		-ms-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		width: 80px;
		text-align: center;
		position: absolute;
		top: 10px;
		left: -7px;
		color: #ffffff;
	}

	.thumbnail-more {
		font-size: 13pt;
		font-weight: 200;
		text-align: center;
		background-color: #9ebde0;
		color: #ffffff;
		position: relative;
		margin-bottom: 20px;
		height: 30px;
		line-height: 30px;
		cursor: pointer;
		cursor: hand;
	}

	.thumbnail-modal .modal-header {
		background-color: #9ebde0;
		color: #ffffff;
	}

	.thumbnail-modal .modal-title {
		font-size: 28px;
	}

	.thumbnail-modal .close {
		color: #ffffff;
		text-shadow: none;
		opacity: 0.5;
		font-weight: 500;
		font-size: 40px;
		line-height: 40px;
	}

	.thumbnail-modal .modal-content {
		border-radius: 0px;
	}

	.thumbnail-modal .modal-footer {
		background-color: rgba(158,189,224,0.5);
	}

	.thumbnail-modal .btn-close {
		background-color: #7890ac;
		color: #ffffff;
		border-color: #4a637f;
		border-radius: 0px;
	}

	.thumbnail-cover {
		    overflow: hidden;
		    min-height:270px;
	}

	@media only screen and (min-width: 768px) {

		.thumbnail-modal .modal-dialog {
			margin: 30px auto;
			width: 80%;
			max-width: 800px;
		}
	}

/** End - SECTIONS (shared) **/

/** NAVIGATION **/

	#logo-navbar {
		height: 95px;
	}

	.nav {
		font-size: 13pt;
		color: rgb(34, 34, 34);
	}

	.navbar-logo {
		position: fixed;
		z-index: 999;
		left: 18px;
		top: 6px;
	}

	.navbar {
		z-index: 998;
		background-color: rgba(235, 240, 255, 1);
	}

	@media only screen and (max-width: 900px) {
		.nav {
			font-size: 10pt;
		}
	}

	@media only screen and (min-width: 768px) {
		#nav-social {
			white-space: nowrap;
			position: relative;
			margin-right: 15px;
			margin-top: 13px;
			margin-left: 5px;
		}

		.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus  {
		  color: #ffffff;
		  background-color: rgba(113, 136, 162, 1);
		  font-weight: 800;
		}
	}

	@media only screen and (max-width: 768px) {
		#nav-social {
			white-space: nowrap;
			position: relative;
			margin-left: 15px;

		}

		.nav {
			font-size: 13pt;
		}
	}

/** End - NAVIGATION **/

/** BILLBOARD / TOP SECTION **/

	.billboard-text p {
	    display: inline-block;
	    color: #000;
	    font-family: "avantgardelt-extralight", arial;
	    background: rgba(255, 255, 255, 0.8);
	    z-index: 888;

	    position: absolute;
	    right: 15px;
	    margin-top: 300px;
	    max-width: 70%;
	    text-align: center;
	}

	#home {
	    background: url(../img/pic4.jpg) no-repeat center center;
	    -webkit-background-size: cover;
	    -moz-background-size: cover;
	    -o-background-size: cover;
	    background-size: cover;
	    width: 100%;
	    overflow: hidden;
	    width: 100%;
		height: 580px;
	}

	#weather {
		position: absolute;
		width: 200px;
		top: 350px;
		left: 20px;
		background-color: rgba(113, 136, 162, .5);
		text-align: center;
		text-transform: uppercase;
	}

	#weather h1 {
		font-size: 13px;
		padding: 10px;
		margin: 0px;
		background-color: rgba(113, 136, 162, .9);
		color: #ffffff;
	}


	#weather i {
	  color: #fff;
	  font-family: weather;
	  font-size: 80px;
	  font-weight: normal;
	  font-style: normal;
	  line-height: 1.0;
	}

	.icon-0:before { content: ":"; }
	.icon-1:before { content: "p"; }
	.icon-2:before { content: "S"; }
	.icon-3:before { content: "Q"; }
	.icon-4:before { content: "S"; }
	.icon-5:before { content: "W"; }
	.icon-6:before { content: "W"; }
	.icon-7:before { content: "W"; }
	.icon-8:before { content: "W"; }
	.icon-9:before { content: "I"; }
	.icon-10:before { content: "W"; }
	.icon-11:before { content: "I"; }
	.icon-12:before { content: "I"; }
	.icon-13:before { content: "I"; }
	.icon-14:before { content: "I"; }
	.icon-15:before { content: "W"; }
	.icon-16:before { content: "I"; }
	.icon-17:before { content: "W"; }
	.icon-18:before { content: "U"; }
	.icon-19:before { content: "Z"; }
	.icon-20:before { content: "Z"; }
	.icon-21:before { content: "Z"; }
	.icon-22:before { content: "Z"; }
	.icon-23:before { content: "Z"; }
	.icon-24:before { content: "E"; }
	.icon-25:before { content: "E"; }
	.icon-26:before { content: "3"; }
	.icon-27:before { content: "a"; }
	.icon-28:before { content: "A"; }
	.icon-29:before { content: "a"; }
	.icon-30:before { content: "A"; }
	.icon-31:before { content: "6"; }
	.icon-32:before { content: "1"; }
	.icon-33:before { content: "6"; }
	.icon-34:before { content: "1"; }
	.icon-35:before { content: "W"; }
	.icon-36:before { content: "1"; }
	.icon-37:before { content: "S"; }
	.icon-38:before { content: "S"; }
	.icon-39:before { content: "S"; }
	.icon-40:before { content: "M"; }
	.icon-41:before { content: "W"; }
	.icon-42:before { content: "I"; }
	.icon-43:before { content: "W"; }
	.icon-44:before { content: "a"; }
	.icon-45:before { content: "S"; }
	.icon-46:before { content: "U"; }
	.icon-47:before { content: "S"; }

	#weather h2 {
	  margin: 0px;
	  color: #fff;
	  font-size: 50px;
	  font-weight: 300;
	  text-align: center;
	  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
	}

	#weather ul {
	  margin: 0;
	  padding: 0;
	}

	#weather li {
	  background: #fff;
	  background: rgba(255,255,255,0.90);
	  padding: 5px;
	  display: inline-block;
	  border-radius: 0px;
	}

	#weather .currently {
	  margin: 5px;
	}

	@media only screen and (max-width: 320px) {
		.billboard-text p {
		    font-size: 25px;
		    padding: 10px;
		    margin-top: 50px;
		}

		#weather {
			left: 50%;
			margin-left: -100px;
		}

	}

	@media only screen and (max-width: 860px) {
		.billboard-text p {
		    margin-left: 5%;
		    margin-right: 5%;
		    max-width: 100%;
		    right: 0px;
		    left: 0px;
		    margin-top: 50px;
		}

		#weather {

		}
	}

	@media only screen and (min-width: 321px) {
		.billboard-text p {
		    font-size: 35px;
		    padding: 20px;
		}
	}

/** End - BILLBOARD / TOP SECTION **/


/** PORTFOLIO **/

	.portfolio {
		font-family: 'Raleway', sans-serif;
	}

	.portfolio .row {
		margin-left: -5px;
		margin-right: -5px;
	}

	.portfolio-container {
		height: 100%;
	}

	.portfolio-state-header {
		height: 60px;
	}

	.portfolio-state-name {
		font-size: 22pt;
		font-weight: 400;
		color: #ffffff;
		background-color: rgba(51,51,51,0.5);
		position: relative;
		height: 40px;
		line-height: 40px;
		top: 10px;
	}

	.portfolio-name {
		font-size: 22pt;
		font-weight: 500;
		line-height: 85%;
		width: 100%;
		display: block;
	}

	.portfolio-location {
		font-size: 15pt;
		font-weight: 200;
		color: #999999;
	}

	.portfolio-photo {
		margin-top: 0px;
		margin-bottom: 15px;
		width: 100%;
	}

	.portfolio-thumbnail {
		background-color: rgba(255,255,255,0.62);
		border: 0px;
		border-radius: 0px;
		margin-bottom: 0px;
		display: block;
		cursor: pointer;
		cursor: hand;
	}

	.portfolio-more {
		font-size: 13pt;
		font-weight: 200;
		text-align: center;
		background-color: #9ebde0;
		color: #ffffff;
		position: relative;
		margin-bottom: 20px;
		height: 30px;
		line-height: 30px;
		cursor: pointer;
		cursor: hand;
	}

	.portfolio-modal .modal-header {
		background-color: #9ebde0;
		color: #ffffff;
		padding: 15px 15px 0px 15px;
	}

	.portfolio-modal .fb-like {
		float: right;
		margin-top: 4px;
		opacity: 0.75;
		margin-right: 5px;
		z-index: 998;
	}

	.fb-link img {
		height: 20px;
		margin-top: -2px;
		border: 0px;
	}

	.portfolio-modal .fb-link {
		float: right;
		margin-top: 4px;
		opacity: 0.75;
		margin-right: 5px;
		z-index: 999;
	}

	.portfolio-modal .portfolio-name {
		line-height: 95%;
	}

	.portfolio-modal .portfolio-location {
		opacity: 0.5;
		color:inherit;
		margin-right: 185px;
	}

	.portfolio-modal .protfolio-address {
		background-color: #bbd0e8;
		text-align: center;
		margin-top: 5px;
		padding: 5px 0px;
		margin-left: -15px;
		margin-right: -15px;
	}

	.portfolio-modal .close {
		color: #ffffff;
		text-shadow: none;
		opacity: 0.5;
		font-weight: 500;
		font-size: 40px;
		line-height: 20px;
	}

	.portfolio-modal .modal-content {
		border-radius: 0px;
	}

	.portfolio-modal .modal-footer {
		background-color: rgba(158,189,224,0.5);
		text-align: center;
		padding: 15px 15px 0px 15px;
	}

	.portfolio-modal .btn-close {
		background-color: #7890ac;
		color: #ffffff;
		border-color: #4a637f;
		border-radius: 0px;
		margin-bottom: 15px;
	}

	.portfolio-modal .portfolio-fact {
		font-size: 16px;
	}

	.portfolio-modal .portfolio-fact .title {
		font-weight: 700;
	}

	.portfolio-modal .expanded-photo {
		text-align: center;
	}

	.portfolio-images.container {
		padding-right: 0px;
		padding-left: 0px;
	}

	.portfolio-images .carousel .thumbnail {
	  display: block;
	  padding: 4px;
	  margin-bottom: 0px;
	  padding-top: 10px;
	  line-height: 1.42857143;
	  -webkit-transition: all .2s ease-in-out;
	  transition: all .2s ease-in-out;
	  border-radius: 0;
	  border: none;
	  background-color: none;
	}

	.portfolio-images .carousel-control {
	  position: absolute;
	  top: 0;
	  left: 0;
	  bottom: 0;
	  width: 15%;
	  opacity: .5;
	  font-size: 20px;
	  color: #9ebde0;
	  text-align: center;
	  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	}

	.portfolio-images .carousel-control.left {
		background-image: none;
		left: 10px;
	}

	.portfolio-images .carousel-control.right {
	  left: auto;
	  right: 10px;
	  background-image: none;
	}

	.portfolio-images .carousel-control {
	  padding-top:10.25%;
	  width:5%;
	}

	.portfolio-images .col {
		padding: 0px;
	}

	.expanded-photo2 {
		visibility: hidden;
	}

	/** PORTFOLIO - SMALL SCREEN **/

	@media only screen and (min-width: 768px) {

		.portfolio-modal .modal-dialog {
			margin: 30px auto;
			width: 80%;
			max-width: 800px;
		}
	}

	@media only screen and (max-width: 768px) {
		.portfolio-name {
			font-size: 22pt !important;
		}
	}
/** End - PORTFOLIO **/

/** GOLF **/

	#thumbnail-thebull {
		background: url(../img/golf-thebull.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

/** End - GOLF **/

/** FISHING **/

	.fishing {
		font-family: 'Raleway', sans-serif;
	}

	#thumbnail-dumperdan {
		background: url(../img/fishing-dumperdan2.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}


	#thumbnail-wolfpack {
		background: url(../img/fishing-wolfpack.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}


	#thumbnail-seadog {
		background: url(../img/fishing-seadog.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}



	#thumbnail-aaphoenix {
		background: url(../img/fishing-aaphoenix.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
/** End - FISHING **/



/** RACE **/


/** End - RACE **/

	#thumbnail-roadamerica {
		background: url(../img/race-roadamerica1.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}

/** EAT **/


/** End - EAT **/

/** PLAY **/

	#thumbnail-abovebeyond {
		background: url(../img/ABCM_Logo.png) no-repeat center center;
		-webkit-background-size: contain;
		-moz-background-size: contain;
		-o-background-size: contain;
		background-size: contain;
		background-color: #ffffff;
	}

/** End - PLAY **/

/** FORMS (shared) **/

	.form-group {
		margin-top: 10px;
		margin-bottom: 25px;
	}

	.spinner {
	  display: inline-block;
	  opacity: 0;
	  width: 0;

	  -webkit-transition: opacity 0.25s, width 0.25s;
	  -moz-transition: opacity 0.25s, width 0.25s;
	  -o-transition: opacity 0.25s, width 0.25s;
	  transition: opacity 0.25s, width 0.25s;
	}

	.has-spinner.active {
	  cursor:progress;
	}

	.has-spinner.active .spinner {
	  opacity: 1;
	  width: 30px; /* This doesn't work, just fix for unkown width elements */
	}

/** End - FORMS (shared **/





.icon-social {
	margin-right: 15px;
}

.divider {
	position: absolute;
	top: -60px;
	left: 0px;
	right: 0px;
	max-width: 100%;
	height:60px;
	background-size: 100% 60px;
	background-repeat: no-repeat;
}

.divider-blue {
	background-image: url(../img/divider-fold1.png);
}

.divider-gray {
	background-image: url(../img/divider-fold2.png);
}


#footer {
	text-align: center;
	font-size: 8pt;
	background-color: #333333 !important;
	color: #ffffff;
	line-height: 15pt;
	font-weight: 200;
}

#footer a:link, #footer a:visited {
	color: #d2e3f6;
}



/** EAT **/

	.eat-circle {
		width: 215px;
		height: 215px;
		border-radius: 50%;
		cursor: hand;
	}

	.eat-circle .text {
		font-family: 'Raleway', sans-serif;
		color: #ffffff;
		display: table-cell;
		text-align: center;
		vertical-align: middle;
		position: relative;
		width: 215px;
		height: 215px;
		max-width: 215px;
		margin: 15px;
		line-height: 35pt;
	}

	.eat-circle.a {
		background-color: #7188a2;
		font-size: 26pt;
		z-index: 5;
	}

	.eat-circle.b {
		background-color: #6f9bcd;
		font-size: 26pt;
		z-index: 10;
	}

	.eat-circle.c {
		background-color: #9dbfe5;
		font-size: 24pt;
		z-index: 15;
	}

	.eat-circle.d {
		background-color: #2d66a5;
		font-size: 24pt;
		z-index: 10;
	}

	.eat-circle.e {
		background-color: #7c94ae;
		font-size: 26pt;
		z-index: 5;
	}

	img#eat-duke-logo {
		width: 280px;
		left: -140px;
		margin-left: 50%;
		position: relative;
	}


	@media only screen and (min-width: 861px) {
		.eat-circles {
			position: relative;
			width: 860px;
			height: 335px;
			margin-left: -430px;
			left: 50%;
		}

		.eat-circle {
			position: absolute;
		}

		.eat-circle.a {
			left: 0px;
			top: 15px;
		}

		.eat-circle.b {
			left: 160px;
			top: 115px;
		}

		.eat-circle.c {
			left: 300px;
			top: 0px;
			font-size: 24pt;
			z-index: 15;
		}

		.eat-circle.d {
			left: 470px;
			top: 95px;
		}

		.eat-circle.e {
			left: 645px;
			top: 25px;
		}
	}

	@media only screen and (max-width: 860px) {
		.eat-circles {
			position: relative;
			width: 100%;
		}

		.eat-circle {
			position: relative;
			margin-left: -107px;
			left: 50%;
			margin-bottom: -25px;
		}
	}

/** End - EAT **/
