@charset "UTF-8";
/* CSS Document */

body {
	margin: 0px;
	padding: 0px;
	background-color: #002e3f;
	background-image:url(ms_images/blue_four_@2X.png);
	background-size: 149px 139px;
	background-repeat:repeat;
	font-family: "proxima-nova",sans-serif;
	color: #dad9d7;
}
p {
	font-size: 15px;
	line-height: 22px;
	color: #dad9d7;
	margin-top: 0px;
	margin-bottom: 1em;
}
h1 {
	font-size: 24px;
	line-height: 24px;
	margin-top: 0px;
	margin-bottom: 20px;
	font-weight: 400;
	text-transform:uppercase;
	color: #FFFFFF;
}
a:link {
	color: #dad9d7;
	text-decoration:none;
}
a:hover {
	color: #f5a822;
	text-decoration:none;
}
a:visited {
	color: #dad9d7;
	text-decoration:none;
}
a[href^=tel]{
    color:inherit;
    text-decoration:none;
}
span.roll {
    background:url(ms_images/play_button_@2X.png) center center no-repeat;
	background-size: 295px 166px;
    height: 166px;
    position: absolute;
    width: 295px;
    z-index: 10;	
} 

/* Header Panel */

#header_container {
	width: 100%;
	background-color: #FFFFFF;
	margin-bottom: -1px;
}
#header {
	height: 100px;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 40px;
	padding-right: 40px;
}
.sean_popke_logo {
	margin-top: 29px;
	float:left;
}
.top_contact {
	width: 200px;
	float:right;
	margin-top: 28px;
	text-transform:uppercase;
	color: #008ec3;
	font-size: 15px;
	line-height: 20px;
	text-align: right;
}
.phone {
	color: #002f40;
	font-size: 22px;
}

/* Hero Video Panel */

#hero_container {
	width: 100%;
	background-color: #f0f0f0;
	background-image:url(ms_images/gray_@2X.png);
	background-size: 149px 139px;
	background-repeat:repeat;
	margin-bottom: -1px;
}
#hero {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
	padding-right: 40px;
}
	
/* About Panel */

#about_container {
	width: 100%;
	background-color: #f0f0f0;
	background-image:url(ms_images/blue_one_@2X.png);
	background-size: 149px 139px;
	background-repeat:repeat;
	margin-bottom: -1px;
}
#about {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
	padding-right: 40px;
	background-image:url(ms_images/popke_circle_@2X.png);
	background-size: 233px 233px;
	background-repeat:no-repeat;
	background-position: 525px 80px;
}
#about_content {
	float:left;
	width: 440px;
}
#clients_content {
	float: right;
	width: 215px;
	border-left-width: 1px;
	border-left-color: #4a95b0;
	border-left-style:solid;
	padding-left: 35px;
}
ul {
	margin: 0px;
	padding: 0px;
	list-style:none;
}
li {
	margin-left: 0px;
	margin-bottom: 5px;
	font-size: 15px;
	line-height: 22px;
	color: #dad9d7;
}
.qty {
   border: solid 1px #ffffff;
    border-radius: 5px;
    width: 15px;
    height: 15px;
   display: inline-flex; /* or inline-flex */
  align-items: center; 
  justify-content: center;
    font-size: 10px;
    line-height: 10px;
    font-weight: 500;
    vertical-align: text-bottom;
margin-top: 2px;
}
	
/* More Panel */

#more_container {
	width: 100%;
	background-color: #f0f0f0;
	background-image:url(ms_images/blue_two_@2X.png);
	background-size: 149px 139px;
	background-repeat:repeat;
	margin-bottom: -1px;
}
#more {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
	padding-right: 40px;
}

.video_left, .video_center {
	width: 295px;
	padding-right: 57px;
	float: left;
}
.video_right {
	width: 295px;
	float: left;
}

/* Contact Panel */

#contact_container {
	width: 100%;
	background-color: #f0f0f0;
	background-image:url(ms_images/blue_three_@2X.png);
	background-size: 149px 139px;
	background-repeat:repeat;
	margin-bottom: -1px;
}
#contact {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
	padding-right: 40px;
}
#contact p {
	margin-bottom: 10px !important;
}
.circle {
	margin-right: 10px;
	margin-bottom:-9px;
}

/* Footer Panel */

#footer_container {
	width: 100%;
	background-color: #f0f0f0;
	background-image:url(ms_images/blue_four_@2X.png);
	background-size: 149px 139px;
	background-repeat:repeat;
	margin-bottom: -1px;
}
#footer {
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 40px;
	padding-right: 40px;
}
#copyright {
	float: left;
	width: 75%;
}
#oldsite {
	float: right;
	width: 25%;
	text-align:right;
}
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

}
@media screen and (max-width: 600px) {
	p, ul, li {
		font-size: 120%;
	}
    #header, #hero, #about, #more, #contact, #footer {
		width: auto;
	}
	#header {
		height: 200px;
	}
	#about {
	background-image:inherit;
}
#hero {
padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
}
#clients_content {
	float: right;
	clear: both;
	width: 100%;
	border-top-width: 1px;
	border-top-color: #e6eaeb;
	border-top-style:solid;
	margin-top: 35px;
	padding-top: 35px;
	padding-left: 0px;
	border-left: 0px;
}
.video_left, .video_center, video_right {
	margin-bottom: 20px;
}
	.responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }
.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}
.row {
    margin-top: 20px;
}
}