/* CSS Document */
/* Design and coding by F3 Designs http://www.f3designs.ca */


/* COLOR PALETTE (specifically for MagicMen)
================================================== */
/* black-darker: #171717 */
/* black-lighter: #2c2c2c */
/* silver: #eaeaed */
/* grey: #4c4c4d */
/* blue: #8fc3d1 */
/* red (logo): #d11136  */
/* red (brighter): #f4063f */


/* MEDIA QUERIES (key breakpoints)
================================================== */
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets-portrait, 768px and up to 991px) */
@media (min-width: 768px) { ... }
/* Medium devices (tablets-landscape, desktops, 992px and up to 1199px) */
@media (min-width: 992px) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }


/* MEDIA QUERIES (expansion breakpoints)
================================================== */
/* Small devices (phones, max 767px) */
@media (max-width: 767px) { ... }
/* Medium devices (tablets-landscape/portrait, desktops, max 991px) */
@media (max-width: 991px) { ... }
/* Large devices (desktops, max 1199px) */
@media (max-width: 1199px) { ... }


/* 404 (Added October 31, 2017) */
.notfound {
	height: 100%;
}
.notfound-message {
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	height: 360px;
	width: 100%;
	text-align: center;
	color: #000000;
}
.notfound-message img {
	margin: 0 auto !important;
	text-align: center !important;
}


/* CLASS SELECTORS (Cover... added July 2017) ============================================================================================= */
.cover {
	height:100%;
	position: relative;
}
.cover h1 {
	position: absolute;
	top: 20%;
	color: #ffffff;
	width: 100%;
	font-size: 60px;
	text-align: center;
}
/* Smartphones (portrait and landscape) */
@media (min-width: 320px) and (max-width: 568px) {
.cover h1 {
	font-size: 48px;
}
}
.cover h2 {
	position: absolute;
	top: 30%;
	color: #ffffff;
	width: 100%;
	font-size: 36px;
	text-align: center;
}
/* Smartphones (portrait and landscape) */
@media (min-width: 320px) and (max-width: 568px) {
.cover h2 {
	font-size: 24px;
}
}
/* ROW 1 */
.row1 {
	height: 35%;
}
/* Smartphones (portrait and landscape)
@media (min-width: 320px) and (max-width: 568px) {
.row1 {
	display: none;
}
} */
.row1 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.col1 {
	padding: 0px;
	height: 100%;
}
/* ROW 2 */
.row2 {
	height: 45%;
	text-align: center !important;
}
.row2 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.col2 {
	padding: 0px;
	height: 100%;
}
.col3 {
	padding: 0px;
	height: 100%;
}
.col4 {
	padding: 0px;
	height: 100%;
}
.btn-container {
	width: 100%;
	position: absolute;
	top: 55%;
	margin: 0 auto;
	text-align: center;
}
/* COVER BUTTON */
.btn-cover {
	text-decoration: none !important;
	border-radius: 10px;
	background-color: #d11136;
	border-color: #d11136;
	text-transform: uppercase;
	font-size: 18px;
}
.btn-cover:link {
	color: #ffffff;
}
.btn-cover:visited {
	color: #ffffff;
}
.btn-cover:hover {
	color: #171717;
	background-color: #eaeaed;
	border-color: #eaeaed;
}
.btn-cover:active {
	color: #ffffff;
}
/* MORE BUTTON */
.btn-more {
	color: #171717 !important;
	text-decoration: none !important;
	border-radius: 10px;
	background-color: #8fc3d1;
	border-color: #8fc3d1;
	margin-top: 15px;
	margin-right: 30px;
	margin-bottom: 15px;
	margin-left: 30px;
}
.btn-more:link {
	color: #171717 !important;
}
.btn-more:visited {
	color: #171717 !important;
}
.btn-more:hover {
	color: #171717 !important;
	background-color: #eaeaed;
	border-color: #eaeaed;
}
.btn-more:active {
	color: #171717 !important;
}
/* DIAL PHONE */
.dial a:link {
	color: #ffffff;
	text-decoration: none !important;
}
.dial a:visited {
	color: #ffffff;
	text-decoration: none !important;
}
.dial a:hover {
	color: #ffffff;
	text-decoration: none !important;
}
.dial a:active {
	color: #ffffff;
	text-decoration: none !important;
}


/* Custom Styles (defined specifically for MagicMen)
================================================== */
.watchourvideo {
	color: #8fc3d1;
	padding: 15px 0px 0px 0px;
}


/* ELEMENT Customizations (customized Bootstrap's defaults specifically for MagicMen)
================================================== */
html, body {
    height: 100%;
	font-family: 'Titillium Web', sans-serif;
	font-weight: 300;
	color: #FFF;
	margin: 0px 0px 0px 0px;
	background-color: #eaeaed;
}
p {
	line-height: 25px;
	margin-bottom: 24px;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: 'Titillium Web', sans-serif;
}
h1 {
	font-weight: 600;
}
h2 {
	color: #f4063f;
	font-size: 24px;
}
h3 {
	color: #8fc3d1;
}
/* Medium devices (tablets-landscape/portrait, desktops, max 991px) */
/* (required for tablet portrait) */
@media (max-width: 991px) {
body {
	background-color: #171717;
}
}
/* Medium devices (tablets-landscape/portrait, desktops, max 991px) */
/* (adds extra bottom margin to columns in content div) */
@media (max-width: 991px) {
.col-md-6 {
 margin-bottom: 90px;
}
}


/* Button Class Customizations (customized Bootstrap's defaults specifically for MagicMen)
================================================== */
.btn-default {
	color: #171717 !important;
	text-decoration: none !important;
	border-radius: 10px;
	background-color: #8fc3d1;
	border-color: #8fc3d1;
	text-transform: uppercase;
}
.btn-default:link {
	color: #171717;
}
.btn-default:visited {
	color: #171717;
}
.btn-default:hover {
	color: #171717;
	background-color: #eaeaed;
	border-color: #eaeaed;
}
.btn-default:active {
	color: #171717;
}


/* Row 1 (header) Class Additions (added specifically for MagicMen)
================================================== */
/* (allows for full-width background-color) */
.header-container {
	margin: 0 auto;
	width: 100%;
	background-color: #171717;
	min-height: 20%;
}
.header {
	padding: 30px 0px 0px 0px;
}
/* (logo) */
.header-col1 {
}
/* (phone/social) */
.header-col2row1 {
	font-size: x-large;
	font-weight: 200;
}
/* (phone) */
.header-col2row1a {
	margin: 15px 0px 0px 0px;
	padding: 0px;
	text-align: center;
}
/* (social) */
.header-col2row1b {
	margin: 0px;
	padding: 0px;
}
/* (global navigation) */
.header-col2row2 {
}
.nav {
	border: none;
}
.navbar {
	margin-top: 30px;
	border: none;
	float: right;
}
.navbar-header {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.navbar-header p {
	margin-bottom: 5px;
}
.navbar-toggle {
	background-color: #f4063f;
	float: none;
	margin-right: auto;
	margin-left: auto;
}
/* customizes the container that the navigation sits within */
.navbar-default {
	background-color: transparent;
}
/* customizes the inactive navbar-nav */
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:visited,
.navbar-default .navbar-nav > li > a:active {
	background-color: #f4063f;
	color: #FFF;
	text-transform: uppercase;
	border-radius: 10px;
	margin: 0px 5px 0px 5px;
}
/* customizes the inactive navbar-nav on hover */
.navbar-default .navbar-nav > li > a:hover {
	background-color: #eaeaed;
	color: #171717;
}
/* customizes the active navbar-nav */
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:visited,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-default .navbar-nav > li.active > a:active {
	background-color: #8fc3d1;
	color: #171717;
}
/* Medium devices (tablets-landscape/portrait, desktops, max 991px) */
/* (required to centre the navbar-toggle) */
@media (max-width: 991px) {
.navbar {
	float: none;
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}
/* (adds bottom margin and no radius to navbar-toggle) */
.navbar-default .navbar-nav > li > a {
	margin-bottom: 10px;
	border-radius: 0px;
}
}


/* Row 2 (jumbotron) Class Customizations (customized Bootstrap's defaults specifically for MagicMen)
================================================== */
/* (allows for full-width background-color) */
.jumbotron-container {
	margin: 0 auto;
	width: 100%;
	background-color: #171717;
}
/* (customizes the container for the jumbotron) */
.jumbotron {
	min-height: 380px;
	background: transparent url(../img/jumbotron.png) no-repeat;
	padding: 0px;
	margin-bottom: 0px;
}
.jumbotron h1 {
	text-transform: uppercase;
	margin-top: 15px;
}
.jumbotron p {
	line-height: 22px;
	margin-bottom: 15px;
}
.modal-content {
  background-color: #eaeaed;
}
.modal-title {
  color: #f4063f;
}
/* (makes youtube videos respond within the modal) */
.flex-video {
position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
margin-bottom: 16px;
overflow: hidden;
}
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
.flex-video iframe,
.flex-video object,
.flex-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
.flex-video { padding-top: 0; }
}


/* Row 3 (content) Class Additions (added specifically for MagicMen)
================================================== */
.content {
	background-color: #171717;
	padding: 30px 0px 60px 0px;
}
/* (col 1) */
.content-col1 {
	padding-left: 15px;
	border-left: solid 1px #4c4c4d;
}
/* (col 2) */
.content-col2 {
	padding-left: 15px;
	border-left: solid 1px #4c4c4d;
}
.content p {
	font-size: 15px;
}
.content p a:link {
	color: #8fc3d1;
	text-decoration: underline;
}
.content p a:visited {
	color: #8fc3d1;
	text-decoration: underline;
}
.content p a:hover {
	color: #4c4c4d;
	text-decoration: underline;
}
.content p a:active {
	color: #8fc3d1;
	text-decoration: underline;
}
/* (questions, collapse) */
.panel {
  background-color: transparent;
  border: 1px solid #4c4c4d;
}
.panel-default > .panel-heading {
  background-color: #8fc3d1;
}
.panel-body a:link {
	color: #8fc3d1;
	text-decoration: underline;
}
.panel-body a:visited {
	color: #8fc3d1;
	text-decoration: underline;
}
.panel-body a:hover {
	color: #4c4c4d;
	text-decoration: underline;
}
.panel-body a:active {
	color: #8fc3d1;
	text-decoration: underline;
}


/* Row 4 (footer) Class Additions (added specifically for MagicMen)
==================================================*/
.footer {
	background-color: #2c2c2c;
	padding: 30px 0px 0px 0px;
}
/* (row 1, col 1; nav) */
.footer-row1col1 {
	text-align: center;
}
.footer-row1col1 a:link {
	color: #8fc3d1;
	text-decoration: none;
	text-transform: uppercase;
	padding-right: 15px;
}
.footer-row1col1 a:visited {
	color: #8fc3d1;
	text-decoration: none;
	text-transform: uppercase;
	padding-right: 15px;
}
.footer-row1col1 a:hover {
	color: #FFF;
	text-decoration: none;
	text-transform: uppercase;
	padding-right: 15px;
}
.footer-row1col1 a:active {
	color: #8fc3d1;
	text-decoration: none;
	text-transform: uppercase;
	padding-right: 15px;
}
/* (row 1, col 2; phone) */
.footer-row1col2 {
	font-size: x-large;
	font-weight: 200;
	margin: 15px 0px 0px 0px;
	padding: 0px;
	text-align: center;
}
/* (row 1, col 3; social) */
.footer-row1col3 {
	margin: 0px;
	padding: 0px;
}
/* (row 1, col 4; copyright) */
.footer-row1col4 {
	text-align: center;
	font-size: x-small;
}
.footer-row1col4 a:link {
	color: #8fc3d1;
	text-decoration: none;
}
.footer-row1col4 a:visited {
	color: #8fc3d1;
	text-decoration: none;
}
.footer-row1col4 a:hover {
	color: #4c4c4d;
	text-decoration: none;
}
.footer-row1col4 a:active {
	color: #8fc3d1;
	text-decoration: none;
}



/* Medium devices (tablets-landscape, desktops, 992px and up to 1170px) */
@media (min-width: 992px) and (max-width: 1170px) {
.tap {
	display: none;
}
}
@media (min-width: 1169px) {
.tap {
	display: none;
}
}