@import url(https://fonts.googleapis.com/css?family=Raleway:200,300,400,700,900);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,400,700,700italic,400italic,300,300italic);

body,html {
    width: 100%;
    height: 100%;
}

body {
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    line-height: 1.5em;
    font-family: "open sans", "helvetica neue", helvetica, arial, sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #666;
}
a {
    text-decoration: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
    color: #fbb202; /* 47c4fe */
}
a:hover {
    text-decoration: underline;
    color: #D09300;
}

iframe, #mivendor-sidebar-iframe, #mivendor-footer-iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}


/* BASICS  
-------------------------------------------------------------- */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
    display: block;
}
audio, canvas, video {
    display: inline-block;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
[hidden] {
    display: none;
}
*,
*:after,
*::before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* TOPNAV
------------------------------------------------------------- */

.topnav {
	background: #242424!important;
	height: 70px;
	margin-bottom:0px;
}
.topnav .container {
	position: relative;
	width: 100%;
    max-width: 1100px;
    padding: 7px 0px 6px 0px;
    margin: 0 auto;
    z-index: 1;
    text-align:center;
}
header.hero a.logo {
	display: inline-block;
	background: url('../images/logo-mnlt-latimes.png') no-repeat;
	background-size: 486px 57px;
	width: 486px;
	height: 57px;
	line-height: 57px;
	overflow: hidden;
	text-indent: -9999em;
	margin-left:0px;
}
.topnav .container nav {
	position: relative;
	top: -8px;
	float: right;
}
.topnav .container nav a {
	display: inline-block;
	margin-left: 20px;
	letter-spacing: .05em;
	font-size: 14px;
	color: #fff;
}
.topnav .container nav a:hover {
	text-decoration: none;
}
.topnav .container nav a.topnav-register {
	border: 1px solid #fff;
	border-radius: 4px;
	padding: 6px 18px;
}
.topnav .container nav a.topnav-register:hover {
	background: #fff; /* 0971ce */
	color: #404040;
}


/* HEADER 
------------------------------------------------------------- */

header.hero {
    background: #242424;
}
header.hero .row {
    margin: 0;
    padding: 0;
}   
header.hero .banner {
    background-image: url('../images/bg-hero.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    min-height: 670px;
    padding: 30px 10% 0px 10%;
    color: #999;
	height: 100%;
}
header.hero .banner h1 {
    margin: 120px 0 40px 0;
    font-weight: 100;
    font-size: 80px;
    color: #fff;
}   
header.hero .banner h4 {
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.25em;
    font-weight: 400;
    color: #fff;
}   
header.hero .banner p {
    line-height: 1.5em;
    font-size: 1.25em;
    color: rgba(255,255,255,.85);
	margin: 0 0 25px;
}   
header.hero .banner .underline {
    border-bottom-color: rgba(252,181,42,.5);
}
header.hero .signup {
    position: relative;
    padding: 20px 80px;
    color: #999;
}
header.hero .signup h3 {
    margin-top: 10px;
    font-size: 48px;
    font-weight: 100;
    color: #fff;
}
header.hero .signup form {
    width: 100%;
    max-width: 286px;
}


/* SIGNUP FORM */

header .form * {
    outline: none;
}
header .form input[type="text"],
header .form input[type="email"],
header .form input[type="password"] {
    background: #5a5a5a;
    background: rgba(255,255,255,.25);
    border: 1px solid #1b1b1b;
    border-radius: 3px;
    width: 100%;
    padding: 4px 8px;
    line-height: 24px;
    font-weight: 300;
    font-size: 14px;
    color: #ccc;
}
header .form input[type="text"]:focus,
header .form input[type="email"]:focus,
header .form input[type="password"]:focus {
    background: #fafafa;
    border-color: #0971ce; /* 5eb2f3 */
    color: #333;
}   
header .form input[type="checkbox"] {
    opacity: .5;
}
header .form input[type="checkbox"]:checked {
    opacity: 1;
}
header .form input[type="submit"], .spinner-button {
    background: #fbb202;
    border: none;
    border-radius: 4px;
    min-width: 150px;
    height: 50px;
    margin-top: 15px;
    line-height: 50px;    
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
header .form input[type="submit"]:hover, .spinner-button:hover {
    background: #D09300;
}

.spinner-button {
    display: none;
}

.fa-spinner.spinning {
    transform-origin: 48% 50%;
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

.terms, .remember {
    display: inline-block;
    padding-left: 5px;
    font-weight: 300;
    font-size: 14px;
    color: #999;
}



/* PAGE SECTION 
------------------------------------------------------------- */

section {
    border-top: 1px solid #fff;
    /* border-bottom: 1px solid #dbd7d7; */
    padding: 80px 0;
}
section:last-of-type {
    border-bottom: none;
    padding-bottom: 120px;
}
.section-head {
    padding-bottom: 60px;
    text-align: center;
}
.section-head h2 {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 48px;
    font-weight: 400;
    color: #333;
    cursor: default;
}
.section-head hr, 
hr.head-line {
    border: 0;
    height: 2px;
    background: #464646; /* fcb52a */
    width: 120px;
    margin: 30px auto;
}


/* SECTION - VIDEO 
------------------------------------------------------------- */
section.video {
	background: #fff;
}
section.video h2 {
	font-size:24px;
	font-weight: 600;
	text-align: left;
	text-transform: none;
	margin-top: 40px;
}

section.video p {
	text-align: left;
}

/* SECTION - HOW MOONLIGHTING WORKS
------------------------------------------------------------- */

section.how {
	padding: 25px 0 0;
}

section.how div.section-head {
	padding-bottom: 0;
}

section.how h2 {
	font-size:36px;
	text-transform: none;
	text-align: center;
	padding-bottom: 20px;
}

section.how h4 {
	text-align: left;
	color:#0071EF;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: .5;
	margin-top: 25px;
}

section.how p {
	text-align: left;
}

section.how div#work-content {
	display:none;
}

section.how div#work-content, section.how div#hire-content {
	margin-top: 25px;
}

section.how ul {
	padding-bottom: 38px;
	border-bottom: #464646 solid 1px; 	
}

section.how li#hire, section.how li#work {
	cursor: pointer;
	list-style: none;
	display: inline;
	margin: 0 25px;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: .5;
}

section.how li#hire.active, li#work.active {
	border-bottom: #0071EF solid 6px; 
	color:#0071EF;
	padding-bottom:10px;
}

section.how img {
	margin-top: 25px;
	height: 100%;
	width: auto;
}

/* SECTION - FIND EXPERTS FOR ANY PROJECT
------------------------------------------------------------- */

section.categories {
	background: #ffffff;
}

section.categories h2 {
	font-size:36px;
	text-transform: none;
	text-align: center;
	padding-bottom: 20px;
}

section.categories h3 {
	color:#ffffff;
	text-transform:uppercase;
	font-size:16px;
	width: 60%;
	border-top:1px solid #ffffff;
	text-align: center;
	margin: 0 auto;
	font-weight: 400;
	letter-spacing: 1;
	padding-top:7px;
}

section.categories div.options {
	width: 20%;
	margin: 0 auto 5px;
	display: inline-block;
	height: 165px;
	padding: 0;
	border:1px solid #464646;
}
.hover-title {
	padding:20px 0;
	margin: 0 -10px;
}
.hover-content {
    display:none;
}
.parent:hover .hover-content {
    display:inline-block;
	color:#0071EF;
	background:#ffffff;
	height:100%;
	margin:0;
	padding:0;
}
.parent:hover .hover-content p {
	padding:75px 10px 0;
	font-size:14px;
	margin: -10px;
}
.parent:hover .hover-title {
    display:none;
}
section.categories div.handyman {
	background-image: url('../images/categories/handyman.jpg');
	background-size:cover;
}
section.categories div.tech {
	background-image: url('../images/categories/tech.jpg');
	background-size:cover;
}
section.categories div.family {
	background-image: url('../images/categories/family.jpg');
	background-size:cover;
}
section.categories div.transportation {
	background-image: url('../images/categories/transportation.jpg');
	background-size:cover;
}
section.categories div.business {
	background-image: url('../images/categories/business.jpg');
	background-size:cover;
}
section.categories div.events {
	background-image: url('../images/categories/events.jpg');
	background-size:cover;
}
section.categories div.artisan {
	background-image: url('../images/categories/artisan.jpg');
	background-size:cover;
}
section.categories div.health {
	background-image: url('../images/categories/health.jpg');
	background-size:cover;
}



/* SECTION - LOGOS
------------------------------------------------------------- */

section.logos {
    background:#FFFFFF;
    display: block;
	height:auto;
	margin:0 auto;
	padding:30px 0px;
    text-align: center;
}
section.logos h2 {
	font-size:36px;
	text-transform: none;
	text-align: center;
	padding-bottom: 20px;
}
section.logos .container {
    /*max-width: 100%;*/
    padding:0px;
}
section.logos .col-md-3 {
    padding: 80px 0px 0px 0px;
    margin:0px 0px;
}
section.logos .col-md-3 img {
    max-width: 300px;
}

.featured-logo {
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.bottom-line { 
	margin:0 auto;
	border-bottom:1px solid #404040;
	width:8%;
	padding-top:10px;
	margin-bottom:30px;
	display:block;
	opacity:0.4;
}


/* SECTION - TESTIMONIALS
------------------------------------------------------------- */

section.testimonials {
	background:#F0EFEF;
	height:auto;
	margin:0;
    text-align: center;
}
section.testimonials h2 {
	font-size:36px;
	text-transform: none;
	text-align: center;
	padding-bottom: 20px;
	color:#404040;
	font-weight: 400;
}
section.testimonials a {
	display:block;
	width:100%;
	height:auto;
}
section.testimonials p {
	text-align: left;
	width: 50%;
	margin-left: 20%;
	margin-right: 15%;
}
section.testimonials img {
	margin-right: 20%;
}
.slides { padding-top:0px; }
.slick-slider { margin:0px 0px 0px 0px!important; }

section.testimonials div.line {
    background-color: #cacaca;
    height: 2px;
    margin-bottom: 15px;
    margin-top: 40px;
    width: 80px;
	margin-left: 20%;
}


/* SECTION - TAGLINE 
------------------------------------------------------------- */

section.tagline {
    background: #0971ce;
    text-align: center;
    padding: 0;
}
section.tagline a {
    display: block;
    padding: 60px 20px;
    line-height: 1.1em;
    font-weight: 300;
    font-size: 28px;
    color: #fff;
}
section.tagline a:hover {
    background: #0466be;
    text-decoration: underline;
    color: #fff;
}


/* PAGE FOOTER 
------------------------------------------------------------- */

footer {
    background: #242424 none repeat scroll 0 0;
    color: #666 !important;
    font-size: 16px;
    padding: 40px 20px;
    text-align: center;
}
footer a {
    color: #999 !important;
    display: inline-block;
    padding: 0 10px;
    text-decoration: none;
}
footer a:hover {
    color: #0071ef;
}
footer .copyright {
    color: #666;
    padding: 0 0 15px;
}
footer .copyright a {
    color: #999;
    padding: 0;
}
footer .social a {
    font-size: 20px;
}
footer .social a:hover {
    color: #fff;
}



/* MISCELLANEOUS 
------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: 1270px;
}
.underline {
    display: inline-block;
    border-bottom: 2px solid #fcb52a;   
}



/* MEDIA QUERIES 
------------------------------------------------------------- */
@media only screen and (max-width: 1250px) {

    section .container.types .col-md-4 {
        padding: 2.5% 2.5%;
    }   

    .section-box {
        width: 90%;
    }

}


@media only screen and (max-width: 1169px) {

    section.logos .col-md-3 img {
        max-width: 150px;
    }

    header.hero .signup {
        text-align: center;
    }

    header.hero .signup form {
        max-width: 100%;
    }
	header.hero .signup h3 {
		font-size: 28px;
		font-weight: 200;
	}
	section.categories div.options {
		width: 25%;
	}
}

@media only screen and (max-width: 992px) {
	header.hero {
		text-align:center;
	}
	header.hero a.logo {
	    margin:0 auto;
	    text-align:center;
	    display:block;
	    float:none;
	}
	header.hero .banner {
		padding-bottom:40px;
		min-height:auto;
	}
	header.hero .banner h1 {
		margin-top:30px!important;
	}
    section.logos .col-md-3 img {
        position: static;
        transform: translateX(0);
	}
	section.video h2, section.video p, section.video div  {
		text-align: center;
		align:center;
	}
	section.categories div.options {
		width: 40%;
	}
	section.testimonials img {
		width: 200px;
		height: auto;
		margin: 0;
	}

}
@media only screen and (max-width: 770px) {
	section.how li#hire, section.how li#work {
		border: #464646 1px solid;
		margin:10px 0;
		border-radius: 5px;
		padding:10px;
		width: 80%;
		display: inline-block;
		min-height: 50px;
	}
	section.how li#hire.active, li#work.active {
		border: none;
		background: #0071EF;
		border-radius: 5px;
		color:#ffffff;
	}
	section.how ul {
		padding-bottom: 0;
		border-bottom: none; 
		margin: 0 auto;
	}
	section.how div#hire-content, section.how div#work-content {
		padding-top: 0;
	}
	header.hero .banner h1 {
        margin-top: 40px;
        font-size: 48px;
    }
	section.categories div.options {
		width: 48%;
	}
	section.testimonials p {
		text-align: left;
		width: 100%;
		margin: 0;
		padding:0;
	}
	section.how img {
		display: none;
	}
	section.video, section.video, section.how div.section-head, section.categories, section.testimonials, section.logos {
		padding:25px 0;
	}
	
}

@media only screen and (max-width: 479px) {
	header.hero a.logo {
		background-position:center center;
		background-size:100%;
		text-align:center;
		margin:0 auto;
		width:auto;
	}
	.topnav .container nav a {
		font-size:10px;
	}
    header.hero .banner {
        min-height: 510px;
        padding-bottom: 40px;
    }
    header.hero .banner h4 {
        font-size: 18px;
    }
    header.hero .banner p {
        font-size: 16px;
    }
    header.hero .signup {
        padding: 40px 10%;
    }
    header.hero .signup form {
        max-width: 100%;
    }
    header .form input[type="text"], 
    header .form input[type="email"], 
    header .form input[type="password"] {
        width: 100%;
    }
    
    section .container {
        padding-left: 10%;
        padding-right: 10%;
    }
    section .container.types {
        padding: 0;
    }
    section .container.types .col-md-4 {
        padding: 60px 10px;
        border-left: none;
    }
    section.logos h4 {
        margin-bottom: 0;
    }
    section.logos {
        padding: 0;
    }   
    section.logos .container {
        padding: 0;
    }
    section.logos .col-md-3 {
        padding: 0 10px;
    }
    section.logos .col-md-3 img {
        position: static;
        max-width: 150px;
    }
    section.powering .container.types .col-md-4 {
        /*min-height: auto;*/
    }
    section.testimonial {
        padding-bottom: 20px;
    }
    section.testimonial .testimonial-image img {
        max-width: 180px;
    }
    section.tagline a {
        padding: 80px 10%;
        line-height: 1.5em;
        font-size: 24px;
    }

    .section-head h2 {
        margin-top: 0;
        font-size: 32px;
    }
    .testimonial-text {
        margin-bottom: 60px;
    }

    .footer-text {
        font-size: 0.9em;
    }
	section.categories div.options {
		width: 100%;
	}
	section.testimonials img {
		display: none;
	}
	section.testimonials p {
		text-align: center;
		width: 100%;
		margin: 0;
	}
	section.testimonials div.line {
		margin: 40px auto 15px;
		width: 80px;
	}

}