/* Marketing Page */

.desktop-block {
display:block
}

.mobile-block {
display:none
}

.mp-text-center {
text-align:center; padding-top:20px; padding-bottom:20px
}

/* Top */

.pin-to-top {
width:100%; position:fixed !important; top:0 !important
}

#mp-top {
width:100%; background:#000000; border-bottom:solid 5px #e41b23; position:relative; z-index:3000
}

.mp-top-body {
width:100%; max-width:1180px; margin:auto; position:relative; padding-left:20px
}

.mp-top-content {
width: calc(100% - 120px); float:right; text-align:right; padding:20px
}

.mp-top-logo {
width:120px; float:left; position:relative
}

#mp-top-logo {
width:120px; height:auto; margin:auto; position:absolute; top:20px
}

#mp-top-logo img {
width:100%; height:auto
}

.dropdown {
width:150px; padding:10px; display:inline-block; background:#e41b23; font-size:18px; color:#ffffff; text-align:center; text-decoration:none; 
margin-bottom:1px; position:relative; cursor:pointer
}

.dropdown-content {
background:#000000; color:#ffffff; display:none; position:absolute; top:44px; left:0px; min-width:150px; padding:12px 16px; z-index:1
}

.dropdown-content a, .dropdown a:hover {
font-size:14px; color:#ffffff; text-decoration:none
}

.dropdown:hover .dropdown-content {
display:block
}

.dropdown p, #mp-quote .dropdown p {
font-size:14px; line-height:25px; color:#ffffff
}

html hr {
background-color:#ffffff; border-color:#ffffff; height:2px; border:0
}

a.btn-red {
width:150px; padding:10px; display:inline-block; background:#e41b23; font-size:18px; color:#ffffff; text-align:center; text-decoration:none; 
margin-bottom:1px
}

a.btn-red:hover {
color:#ffffff; text-decoration:none; opacity:.8
}

.fa-phone {
color:#ffffff; font-size:14px; position:relative; top:-2px
}

.fa-angle-down {
color:#ffffff; font-size:18px; position:relative; top:0px
}

.btn-spacer {
margin-right:20px
}

/* Banner */

#mp-banner {
width:100%; height:310px; vertical-align:middle;
background: url('../images/marketing-page/banner.jpg'); background-size:cover
}

#mp-banner h1 {
font-size:46px; line-height:55px; font-weight:800; color:#ffffff; text-shadow: 1px 1px 2px #000000
}

.mp-banner-body {
width:100%; max-width:11600px; height:310px; margin:auto; padding-left:20px; padding-right:20px; display:table; vertical-align:middle;
position:relative
}

.mp-banner-title {
width:100%; display:table-cell; vertical-align:middle; text-align:center
}

.mp-banner-buttons {
width:100%; padding-top:20px; padding-bottom:20px; display:block; margin-bottom:-40px
}

#fiberon-logo {
width:160px; height:auto; position:absolute; bottom:10px; right:10px
}

#fieron-logo img, #fieron-logo-mobile img {
width:100%; height:auto
}

/* Mobile Banner */

.mp-banner-mobile {
width:100%; height:150px;
background: url('../images/marketing-page/banner.jpg'); position:relative
}

#mp-banner-title-mobile {
width:100%; padding:20px; padding-top:40px; padding-bottom:40px; background:#e2e2e2; text-align:center
}

#mp-banner-title-mobile h1 {
font-size:36px; line-height:45px; font-weight:800; color:#000000; padding-bottom:25px
}

#fiberon-logo-mobile {
width:100px; height:auto; position:absolute; bottom:10px; right:10px
}

/* Text Boxes */

#mp-text-boxes {
width:100%; max-width:1180px; margin:auto; text-align:center; position:relative; vertical-align:top; padding-top:100px
}

#mp-text-boxes h2 {
font-size:38px; line-height:45px; color:#000000; text-align:center; font-weight:800; padding-bottom:30px; padding-left:20px; padding-right:20px
}

#mp-text-boxes h4 {
font-size:24px; line-height:30px; color:#000000; text-align:center; font-weight:800; padding-top:30px; padding-bottom:10px
}

#mp-text-boxes p {
font-size:16px; line-height:25px; color:#000000; text-align:center
}

.mp-text-box {
width:24%; min-width:200px; display:inline-block; padding:20px; vertical-align:top
}

/* Tabs */

.mp-tabs {
width:100%; max-width:1160px; margin:auto; font-family:"Open Sans",sans-serif; font-style:normal; font-weight:400
}

.mp-tabs h2 {
font-size:38px; line-height:45px; color:#000000; text-align:center; font-weight:800; padding-left:20px; padding-right:20px; padding-top:100px; 
padding-bottom:10px
}

.mp-tabs h3 {
font-size:32px; line-height:40px; color:#000000; font-weight:800; padding-left:40px
}

.mp-tabs h6 {
font-size:26px; line-height:35px; color:#000000; text-align:center; font-weight:500; padding-left:20px; padding-right:20px; padding-bottom:50px
}

.mp-tabs span {
color:#8c8c8c; font-weight:800
}

.mp-tabs a {
color:#0a96ff
}

.mp-tabs td {
padding:10px; font-size:16px; line-height:25px; color:#000000
}

.mp-tabs td.checkmark {
width:30px; height:30px; padding:0px; background: url('../images/marketing-page/checkmark.jpg') no-repeat top
}

.tab {
overflow:hidden; background-color:#fffffff; text-align:center
}

.tab button {
width:24%; display:inline-block; background-color:#e4e4e4; border-top-left-radius:3px; border-top-right-radius:3px; border:none;
outline:none; cursor:pointer; padding:14px 16px; transition:0.3s
}

.tab button label {
font-size:16px; color:#b2b2b2
}

.tab button h5 {
font-size:20px; color:#484848
}

.tab button:hover {
background-color:#dddddd
}

.tab button.active {
background-color:#0b5560
}

.tab button.active label {
font-size:16px; color:#ffffff
}

.tab button.active h5 {
font-size:20px; color:#ffffff
}

/* Style the tab content */
.tabcontent {
display:none; border-top:solid 3px #e4e4e4;
-moz-box-shadow: 0 0 30px #ccc;
-webkit-box-shadow: 0 0 30px #ccc;
box-shadow: 0 0 30px #ccc;
}	

.tab-content-left {
width:50%; float:left
}

.tab-content-left img {
width:100%; height:auto; display:block
}

.tab-content-right {
width:50%; float:right; padding:20px
}

.mp-tabs-mobile img {
width:100%
}

.mp-tabs-mobile-content {
width:100%; padding:20px
}

/* Bundle */

#bundle {
width:100%; max-width:1180px; margin:auto; text-align:center
}

#bundle h2 {
font-size:38px; line-height:45px; color:#000000; text-align:center; font-weight:800; padding-left:20px; padding-right:20px; padding-top:100px; 
padding-bottom:10px
}

#bundle h4 {
font-size:24px; color:#000000; text-align:center; padding-top:20px; padding-bottom:20px
}

#bundle h6 {
font-size:26px; line-height:35px; color:#000000; text-align:center; font-weight:500; padding-left:20px; padding-right:20px; padding-bottom:40px
}

#bundle .fas {
position:absolute; bottom:0px; right:-52px;
-ms-transform:translateY(-130%);
-webkit-transform:translateY(-130%);
-moz-transform:translateY(-130%);
-o-transform:translateY(-130%);
transform:translateY(-130%);   
font-size:60px; color:#ffffff; z-index:2999; background:#8c8c8c; border-radius:50%; padding:5px; width:70px; height:70px; display:block
}

.bundle {
width:33%; min-width:383px; height:auto; display:inline-block; padding:10px; position:relative; vertical-align:top
}

.bundle img {
width:100%; height:auto; display:block; margin:auto
}

.bundle img:hover {
opacity:.8
}

.bundle-img {
width:100%; position:relative
}

/* Quote */

#mp-quote {
width:100%; max-width:1180px; margin:auto
}

#mp-quote h2 {
font-size:38px; line-height:45px; color:#000000; font-weight:800; padding-bottom:10px
}

#mp-quote p {
font-size:16px; line-height:25px; color:#000000
}

.mp-quote-content {
width:calc(100% - 300px); float:left; padding: 20px
}

.mp-quote-headshots {
width:280px; float:right; padding-left:10px; padding-right:10px
}

p.mp-headshot-1 {
text-align:center; padding-top:20px; padding-bottom:50px
}

p.mp-headshot-2 {
text-align:center; padding-top:20px; padding-bottom:20px
}

.mp-quote-headshots img {
width:100%; display:block; margin:auto
}

.mp-quote-headshots img:hover {
opacity:.8
}

.mp-separator {
width:100%;max-width:1160px; height:5px; margin:auto; background:#e41b25; margin-bottom:100px; margin-top:80px
}

.mp-buttons-wrap {
width:100%; max-width:330px; padding-bottom:100px; padding-top:30px
}

table.mp-headshots {
max-width:500px; margin:auto
}

table.mp-headshots img {
width:100%; height:auto
}

table.mp-headshots td {
padding:10px
}

/* Footer */

#footer-wrapper {
border-top:solid 5px #c7262e; margin-top:100px
}

#footer-wrapper p {
margin-top:0; margin-bottom:1rem
}

.terms {
padding-left:20px; padding-right:20px
}

/* Form */

#contact-form {
width:100%; margin:auto; padding-top:30px; padding-bottom:70px
}

#contact-form input[type=text], #contact-form input[type=url], #contact-form input[type=tel], #contact-form input[type=number], #contact-form input[type=color], 
#contact-form input[type=email], #contact-form input[type=password], #contact-form textarea, #contact-form select {
width:100%; padding:.45rem 1.2rem; background:#ffffff; display:block; border:1px solid #efefef;
font-size:14px; font-weight:300; line-height:1.6; color:#495057
}

#contact-form textarea {
width:100%; height:150px; padding:.45rem 1.2rem; background:#ffffff; display:block; border:1px solid #efefef;
font-size:14px; font-weight:300; line-height:1.6; color:#495057
}

input[type=submit] {-webkit-appearance: none}
#inf_other_Username, input[type=password] {text-transform:none}
input[type=radio] {margin-bottom:12px}

#contact-form input[type=submit] {
width:105px; height:50px; background:#000000; border:0px; position:relative; cursor: pointer;
font-size:1rem; font-weight:300; line-height:50px; color:#ffffff;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
margin-top:38px
}

#contact-form input[type=submit]:hover {
opacity:.8;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out
}

#contact-form ::-webkit-input-placeholder {
color:#495057; font-size:14px; font-style:italic
}

#contact-form ::-moz-placeholder {  /* Firefox 19+ */
color:#495057; font-size:14px; opacity:1; font-style:italic
}

#contact-form :-ms-input-placeholder {
color:#495057; font-size:14px; font-style:italic
}

#contact-form table {
width:100%
}

#contact-form td {
vertical-align:top; padding:5px; color:#000000; text-align:left
}

#contact-form label {
font-size:14px; color:#000000; font-weight:800; display:block; margin-bottom:-10px; padding-top:40px
}

#contact-form .wpcf7-form p {
display:inline-block; width:100%; margin-right:0%; margin-left:0%; font-size:16px
}

#contact-form .wpcf7-list-item {
margin-top:10px
}

form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
padding:10px !important; border-color:#ffb900; background:#ffb900; border-radius:.25rem;
font-size:14px; line-height:14px; color:#ffffff; text-align:center
}

div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
border:2px solid #ffffff !important; background:#ffffff; color:#495057
}

span.wpcf7-not-valid-tip {
color:#1d1d1d !important; font-size:15px !important; line-height:25px !important; font-weight:normal; display:block
}

div.wpcf7-mail-sent-ok {
background:#ffffff !important; color:#495057 !important
}

/* Responsive */

@media only screen and (max-width: 800px) {
#mp-text-boxes h2, .mp-tabs h2, #bundle h2, #mp-quote h2 {
font-size:30px; line-height:38px
}

.mp-tabs h2, #bundle h2 {
padding-top:60px
}
    
.mp-tabs h3, #bundle h3 {
font-size:26px; line-height:32px
}

#mp-text-boxes h4 {
font-size:20px; line-height:28px
}

#mp-text-boxes p, #mp-quote p {
font-size:14px; line-height:22px
}

a.btn-red {
font-size:16px
}
    
.desktop-block {
display:none
}

.mobile-block {
display:block
}
	
#mp-top-logo {
width:90px; top:10px
}
	
#mp-top a.btn-red {
display:none
}
	
#mp-text-boxes {
padding-top:60px
}
   
.mp-separator {
margin-bottom:30px; margin-top:60px
}   
    
.mp-quote-content, .mp-quote-headshots {
width:100%; float:none; display:block
}
    
.mp-buttons-wrap {
width:100%; max-width:330px; padding-bottom:30px; padding-top:30px; margin:auto
}
    
#contact-form td {
width:100%; display:block
}
    
#contact-form input[type=submit] {
margin-top:18px
}
   
#bundle .fas {
position:absolute; bottom:0px; right:-37px; top:70%; font-size:30px; padding:5px; width:40px; height:40px
}

.bundle {
width:100%; min-width:inherit; display:block; padding:10px
}    
}