/* Edits for Bliss Boats  */

/* --- More CSS Includes --- */
@import url("../foundation-icons/foundation-icons.css");



/* --- Fonts --- */


/* --- General Edits --- */
p {
	font-size:18px;
	letter-spacing:.08em;
	font-family: cardo, Helvetica;
	/*font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;*/
}
.info strong {
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  text-transform:uppercase;
}
h1 {
  font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-variant:small-caps;
  font-style: normal;
  font-weight: lighter;
}
/* --- Header Boat Image --- */
	body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	html, body, #headerboat {
		height: 100%;
	}
	#headerboat {
	background: #222 url('../img/img_boat_header.jpg') center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}
	#headerboat div {
		width: 100%;
		position: absolute;
		bottom: 40px;
		text-align:center;
	}
	#headerboat p {
	color:#FFFFFF; 
	font-size:96px; 
	margin-bottom:-20px;
	}

/* --- Info Boxes --- */
	.fi-info {font-size:48px;}
	.detail {
		display:block;
		overflow:hidden;
		position:relative;
		text-align:center;
	}
	.minfo {
	text-align:left;
	}
	.moreinfo {
		margin-bottom: 5px;
		padding: 6px 15px;
	}
	.moreinfo p {
	}
	.minfo i {
		text-align:center;
	}
	.minfo {visibility:hidden; display:none;}
	.sinfo {
		margin:0 0 -50px; 0;
		position:relative;
		z-index:8;
		display:block;
		overflow:hidden;
		bottom:100px;
		left:50px;
		text-align:left;
		
	}
	.sinfo i {
		font-size:48px;
		color:#ffffff;
		border:none;
	}
	.sinfo h3 {
		font-size:18px;
		color:#ffffff;
	}
	.has-tip {
		border-bottom:none !important;
	}
/* --- Info --- */
	.info .row {
		margin-top: 40px;
	}

/* --- End Gallery --- */
	.phoneview {
		display:none;
		opacity:0;
		visibility:hidden;
	}
	.fi-camera {font-size:72px;}
	.fi-zoom-in {}
	.gall:hover {opacity: 0.7;}
	/*  imageWrap  */
	.imageWrap {
		margin: 0 0 0 0;
		padding: 0;
		list-style: none;
		position: relative;
		width: 100%;
	}
	 
	.imageWrap li {
		position: relative;
		float: left;
		overflow: hidden;
		width: 25%; /* Fallback */
		width: -webkit-calc(100% / 4);
		width: calc(100% / 4);
	}
	 
	.imageWrap li a,
	.imageWrap li a img {
		display: block;
		width: 100%;
		cursor: pointer;
	}
	 
	.imageWrap li a img {
		max-width: 100%;
	}
	 
	/* Flexbox is used for centering the heading */
	.imageWrap li a div {
		position: absolute;
		left: 0px;
		top: 0px;
		right: 0px;
		bottom: 0px;
		background: rgba(0, 0, 0, 0.72);
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: flex;
		-webkit-align-items: center;
		-moz-align-items: center;
		-ms-align-items: center;
		align-items: center;
		text-align: center;
		margin:auto;
		/*padding-top:30%;*/
		opacity: 0;
	}
	 
	.imageWrap li a:hover div {
		opacity: 1;
	}
	 
	.imageWrap li a div h3 {
		width: 100%;
		color: #fff;
		text-transform: uppercase;
		font-size: 4.4em;
		letter-spacing: 2px;
		padding: 0 10px;
	}
	 
	.reveal-modal {
		 text-align:center;
		 }

/* --- footer --- */
	.footer { background-color:#333;}
	.footer p {
		margin-top:20px;
		margin-bottom:10px;
		color:#FFFFFF;
		font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
		font-size:12px;
		text-align:center;
	}

/* --- Resize --- */
/* Example for media query: change number of items per row */
 
@media screen and (max-width: 1190px) {
    /*.imageWrap li {
        width: 20%;  Fallback 
        width: -webkit-calc(100% / 5);
        width: calc(100% / 5);
    }*/
		.fi-camera {font-size:72px;}/*.imageWrap li a div {padding-top:20px;}*/
}
 
@media screen and (max-width: 945px) {
    .imageWrap li {
        width: 25%; /* Fallback */
        width: -webkit-calc(100% / 4);
        width: calc(100% / 4);
    }
	.fi-camera {padding-top:10%; font-size:48px;}
	.phoneview {
		display:none;
		opacity:0;
		visibility:hidden;
	}
	.computerview {
		display:inline;
		opacity:1;
		visibility:visible;
	}
}
 
 
@media screen and (max-width: 660px) {
	.sinfo {visibility:hidden; display:none;}
	.minfo {visibility:visible; display:inherit;}
    .imageWrap li {
        width: 33.3333333%; /* Fallback */
        width: -webkit-calc(100% / 3);
        width: calc(100% / 3);
    }
	.computerview {
		display:none;
		opacity:0;
		visibility:hidden;
	}
	.phoneview {
		display:inline;
		opacity:1;
		visibility:visible;
	}
}
 

 
@media screen and (max-width: 400px) {
	.sinfo {visibility:hidden; display:none;}
	.minfo {visibility:visible; display:inherit;}
    .imageWrap li {
        width: 100%;
    }
	.imageWrap li a:hover div {
		opacity: 0;
		visibility:hidden;
		display:none;
	}
	.computerview {
		display:none;
		opacity:0;
		visibility:hidden;
	}
	.phoneview {
		display:inline;
		opacity:1;
		visibility:visible;
	}
}