/*

Theme Name: Color By Mia

Theme URI: http://colorbymia.com/

Description: Color By Mia Theme

Version: 2.0

Author: Paul Maloney

Author URI: http://paulmaloney.net/

Tags: new, rwd, grey, modern

*/





/* RESET (http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none - public domain) */



html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}



/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

	display: block;

}



body {

	line-height: 1;

}



ol, ul {

	list-style: none;

}



blockquote, q {

	quotes: none;

}



blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}



table {

	border-collapse: collapse;

	border-spacing: 0;

}



/* 

==========================================================================

GLOBAL & WP SPECIFIC STYLES

==========================================================================

*/



* {

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;



	-webkit-text-size-adjust: none; 	

}



input, textarea, select {



    -webkit-border-radius:0; 

    border-radius:0;

}



img,

audio,

video,

canvas {

	max-width: 100%;

}

body {
	height:auto!important;
}

html {

	min-height: 100%;

	margin-bottom: 1px;

	overflow: -moz-scrollbars-vertical!important; 

}



::selection {

	background:#333;

	color:#fff;

}



::-moz-selection {

	background:#333;

	color:#fff;

}



::-webkit-selection {

	background:#333;

	color:#fff;

}



.cf:before,.cf:after {content: " "; /* 1 */    display: table; /* 2 */}

.cf:after {clear: both;}

.cf {clear: both;}



strong, b {

	font-weight:bold;

}



em, i {

	font-style:italic;

}



img.alignright {

	float:right;

	margin:0 0 2em 1em;

}



img.alignleft {

	float:left;

	margin:0 2em 1em 0;

}



img.aligncenter {

	display: block;

	margin-left: auto;

	margin-right: auto;

}



.alignright {

	float:right;

	margin:0 0 2em 1em;

}



.alignleft {

	float:left;

	margin:0 0 2em 1em;

}



img.wp-smiley {

	float: none;

	margin: 0 0 0 5px;

	vertical-align:middle;

}



p {

	margin: 0 0 20px 0;

}



a {

	color: #333;

	text-decoration: none;

}



a:hover {

	color: #777;

	text-decoration: none;

}



hr {

	border:0;

	height: 1px;

	background: #e5e5e5;

	margin: 10px 0;

}


blockquote {
    width: 75%;
    margin: 50px auto;
    text-align: center;
    background: #f5f5f5;
    padding: 50px;
}

/* 

==========================================================================

H & LINKS

==========================================================================

*/



h1 {

	font: 30px 'Work Sans', Helvetica , Arial, sans-serif;	

	margin:0 0 20px 0;

	padding:0;

	color: #333;

}



h2 {

	font: 26px 'Work Sans', Helvetica , Arial, sans-serif;	

	margin:0 0 20px 0;

	padding:0;

	color: #333;

}



h3 {

	font: 22px 'Work Sans', Helvetica , Arial, sans-serif;

	margin:0 0 20px 0;

	padding:0;

	color: #333;

}



h4 {

	font: 20px 'Work Sans', Helvetica , Arial, sans-serif;

	margin:0 0 20px 0;

	padding:0;

	color: #333;

}



h5 {

	font: 18px 'Work Sans', Helvetica , Arial, sans-serif;

	margin:0 0 20px 0;

	padding:0;

	color: #333;

}





/* 

==========================================================================

GENERAL

==========================================================================

*/



body {

	background: #fff;

	color: #828282; 

	border:15px solid #333;

	font: 15px/1.7 'Work Sans', Helvetica, Arial, sans-serif;

	margin:0;

	-webkit-font-smoothing: antialiased;

}



.container {

	max-width: 1140px;

	width:100%;

	margin: 50px auto;

}



.inner {

	position: relative;

	width: 100%;

	max-width: 1140px;

	margin: 0 auto;

	padding: 0 10px;

}



/* 

==========================================================================

HEADER

==========================================================================

*/



header {

	width:100%;

	max-width: 1140px;

	margin: 20px auto;

	padding: 0 10px;

}



.logo {

    width: 290px;

    height: 60px;

    float: left;

    margin: 0 0 0 5px;

	transition: all 0.3s ease-in;    

}



.logo a {

	background: url("images/logo.png");

    float: left;

    width: 290px;

    height: 60px;

    margin: 0px;

    text-decoration: none;

	transition: all 0.3s ease-in-out;

}



.connect {

	float: right;

	margin: 12px 0 0 0;

}



.social {

	color: #777;

	font-size: 20px;

	padding: 0 5px;

	transition: all 0.3s ease-in;

}



.social:hover {

	color: #333;

	transition: all 0.3s ease-in-out;	

}

.wpcf7-text, select, textarea {
    width: 100%;
    padding: 10px;
    border: 2px solid 
    #e5e5e5;
color: #828282;
font: 15px 'Work Sans', Helvetica, Arial, sans-serif;
}

.wpcf7-submit,
.button {

	font-size: 14px;
	border:0;
cursor: pointer;
	color: #fff;

	text-transform: uppercase;

	padding: 10px 20px;

	background: #333;

	font-weight: bold;

	margin: 0 0 0 10px;

	transition: all 0.3s ease-in;	

}


.wpcf7-submit:hover,
.button:hover {

	background: #777;

	color: #fff;

	transition: all 0.3s ease-in-out;

}



.container .button {

	display: block;

	width: 200px;

	text-align:center;

	margin: 20px 0;

}



/* 

==========================================================================

NAVIGATION

==========================================================================

*/



nav {

	border-top: 1px solid #e5e5e5;

	border-bottom: 1px solid #e5e5e5;

	padding: 5px 0;

	text-transform: uppercase;

	font-size: 14px;

}



nav a {

	color: #777;

	margin: 0;

	padding: 10px;

}



nav a:hover {

	color: #333;

	margin: 0;

	background: #fff;

	padding: 10px;

}



.toggleMenu {

    display:  none;

	padding: 10px 15px 10px 8px;

    color: #fff;

	border: 2px solid #333;	

	background: #333;

	width: 100%;

}



.toggleMenu:hover {

	padding: 10px 15px 10px 8px;

	color: #fff;

	border: 2px solid #777;

    background: #777;

    transition: all 0.3s ease 0s;    	

}



.nav {

	max-width: 1140px;

	margin: 0 auto;

	list-style: none;

	*zoom: 1;

	text-align: justify;

	height:41px;

}



.nav .extra {

    display: inline-block;

    width: 100%;

    *display: inline;

    *zoom: 1;

}



.nav:before,

.nav:after {

    content: " "; 

    display: table; 

}



.nav ul {

    list-style: none;

    width: 9em;

    min-width: 200px;

    padding: 3px 0 0 0;

}



.nav a {

    padding: 10px 10px 10px 10px;

    color:#777;

    margin: 0;

}



.nav a:hover, .nav li:hover {

    background: #fff;

    color:#333;

}



.nav li:hover a {

    color:#333;

}



.nav li {

    position: relative;

}

.nav > li {

	display:inline-block;

}



.parent:hover {

    background: #fff;

	color: #333;

}



.nav > li > .parent {

    background-image: url("images/downArrowG.png");

    background-repeat: no-repeat;

    background-position: right;

 	padding: 10px 15px 10px 10px;	 

 	margin: 0 5px 0 0;  

}

.nav > li > a {

    display: block;

}

.nav li ul {

    position: absolute;

    left: -9999px;

}

.nav > li.hover > ul {

    left: 0;

}

.nav li li.hover ul {

    left: 100%;

    top: 0;

}

.nav li li a {

    display: block;

    background: #333;

    position: relative;

    z-index:100;

    border-top: 0;

	color: #fff!important;

}

.nav li li li a {

    background:#777;

    z-index:200;

    border-top: 0;

	color: #fff!important;

}

.nav li li a:hover, .nav li li li a:hover {

    background:#777;

	color: #fff;

}



/* 

==========================================================================

HERO

==========================================================================

*/



.hero {

	height: 550px;

	background-size: cover;

	background-position: center;

	width: 100%;

	display: block;

}



.banner {

	height: 550px;

	display: block;

	z-index: 0;

	position: relative;	

}



.banner ul li {

	height: 550px!important;

	display: block;

	float: left;	

	position: relative;	

}



.unslider {

	overflow:auto;

	margin:0;

	padding:0;

	position: relative;

}



.unslider-wrap {

	position:relative;

}



.unslider-wrap.unslider-carousel>li {

	float:left;

}



.unslider-vertical > ul {

	height:100%;

}



.unslider-vertical li {

	float:none;

	width:100%;

}



.unslider-fade {

	position:relative;

}



.unslider-fade .unslider-wrap li {

	position:absolute;

	left:0;

	top:0;

	right:0;

	z-index:8;

}



.unslider-fade .unslider-wrap li.unslider-active {

	z-index:10;

}



.unslider li,.unslider ol,.unslider ul {

	list-style:none;

	margin:0;

	padding:0;

	border:none

}



.unslider-arrow {

	position:absolute;

	left:20px;

	z-index:2;

	cursor:pointer;

}



.unslider-arrow.next {

	left:auto;

	right:20px;

}



.unslider-nav  {

	border:0!important;

    float: right;

    padding: 0;

    position: absolute;

    left: 0;

    right: 0;

    bottom: 5px;

}



.unslider-nav ol {

	list-style: none;

	text-align: center;

}



.unslider-nav ol li {

	display: inline-block;

	width: 10px;

	height: 10px;

	margin: 0 4px;

	background: transparent;

	border-radius: 5px;

	overflow: hidden;

	text-indent: -999em;

	border: 2px solid #fff;

	cursor: pointer;

}



.unslider-nav ol li.unslider-active {

	background: #fff;

	cursor: default;

}



.unslider-arrow {

    width: 40px;

    height: 40px;	

	position: absolute;

	top: 44%;

}



.next {

    display: block;

	background: url("images/next.png");

	right: 10px;

}



.prev {

    display: block;

	background: url("images/prev.png");

	left: 10px;

}



.dott {

	color: #cf6c2c;

	display: inline-block;

}



.unslider nav {

	background: none;

}



.page-hero {

	height: 550px;

	background-size: cover;

	background-position: top center;

}



.logos {

	width:100%;

	max-width: 1140px;

	margin: 0 auto;	

	text-align: center;

	text-transform: uppercase;

	padding: 50px 0;

	border-bottom: 1px solid #e5e5e5;

}



.logos img {

	padding: 0 10px;

}



.welcome {

	padding: 50px 0;

	text-align: center;

}



.insta {

	padding: 50px 0;

	text-align: center;

}



.insta a {

	text-decoration: underline;

}



/* 

==========================================================================

TESTIMONIALS

==========================================================================

*/



.testimonials {

	margin: 20px auto;

	display:block;

}



.testimonial {

	background: #f5f5f5;

	padding: 10px;

	margin: 0 0 20px 0;

}



.testimonial p {

	margin: 0;

}



.tauth {

	color: #333;

	display:block;

}



/* 

==========================================================================

PRESS

==========================================================================

*/



.press{

	margin: 20px auto;

	display:block;

}



.press-item {

	border: 1px solid #e5e5e5;

	padding: 10px;

	margin: 1%;

	float:left;

	width: 31%;

}



/* 

==========================================================================

FOOTER

==========================================================================

*/



footer {

	width:100%;

	max-width: 1140px;

	margin: 0 auto;		

	border-top: 1px solid #e5e5e5;	

	clear:both;

	padding: 20px 10px;

}



.footleft {

	float: left;

}



.footright {

	float: right;

}





/* 

==========================================================================

RETINA FULL SIZE

==========================================================================

*/



@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) { 



 .logo a {

	background: url('images/logo_2x.png') no-repeat;

	background-size: 290px 60px;

 }



 .nav > li > .parent {

    background-image: url("images/downArrowG_2x.png");

	background-size: 20px 5px;

 }



 .nav li .more {

	background-image: url("images/downArrow_2x.png");

	background-size: 20px 5px;

 } 



}





/* 

==========================================================================

MEDIA QUERIES

==========================================================================

*/





@media screen and (min-width: 960px) {



}





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



}





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



nav {

	float:none;

	width:100%;

	margin: 0;

	padding:0;

	border:0;

 }



 .nav a {

	font-size: 14px;

	padding:10px;

 }



 .nav {

	clear: both;

	background: #777;

	height:auto;

	text-align:left;

 }



 .burger {

	font: 30px/0.5 Helvetica, Arial, sans-serif;	

 	text-align: right;

 	padding:0;

 	display: inline;

 	vertical-align: middle;

 	padding:5px;

 	float:right;

 }



 .nav li a:hover, .nav li:hover {

	background: #333;

 }



.extra {

    display: none !important;

    height: 1px !important;

    width: auto;

}



 .nav > li a {

	border-bottom: 1px solid #FFFFFF;

	color: #fff;

 }



 .active {

	display: block;

 }



 .nav > li {

	float: none;

	display:block;

 }



 .nav > li > .parent {

	background-position: 95% 50%;

 }

  

 .nav > li > .parent {

	background-image: none; 

 }

    

 .nav li .more {

	background-image: url("images/downArrow.png");

	background-repeat: no-repeat;

	background-position: 55% 50%;

	float: right;

	width: 15%;

	padding: 0;

	margin: 10px 5px 2px 0px;

	cursor: pointer;

	z-index: 200;

	position: relative;

 }



 .nav li .more:before {

	content: "";

	background: #fff;

	width: 1px;

	display: block;

	position: absolute;

	top: 0;

	bottom: 0;

	left: -2px;

 }

  

 .nav ul {

	display: block;

	width: 100%;

	padding: 0;

 }



 .nav > li.hover > ul , .nav li li.hover ul {

	 position: static;

 }

   

 nav a {

 	margin: 0 !important;

 }



 nav a:hover {

 	color: #fff!important;

 }



 nav a:hover .parent, .parent {

 	color: #fff!important;

 }



}





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



 .logo {

 	display: block;

 	float: none;

 	margin: 0 auto;

 }



 .connect {

 	display: block;

 	float: none;

 	margin: 30px auto 10px auto;

 	text-align: center;

 }



 .social {

 	display: none;

 }



 .hero, .banner ul li, .banner {

 	height: 300px!important;

 }



 .page-hero {

 	height: 150px;

 }

 

 .press-item {

	margin: 1%;

	float:left;

	width: 48%;

 }



}





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



 .press-item {

	margin: 0 0 20px 0;

	float:none;

	display:block;

	width: 100%;

 }


blockquote {
    width: 100%;
}


}





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



 .container {

	min-width:240px;

	width:100%;

 }

 

 .logo {

    width: 220px;

    height: 46px;

 }



 .logo a {

	background: url("images/logom.png");

    width: 220px;

    height: 46px;

 }



@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) { 



 .logo a {

	background: url('images/logom_2x.png') no-repeat;

	background-size: 220px 46px;

 }



}


}

.new-home {
width: 100%;
max-width: 1140px;
margin: 50px auto;
}

.new-home-left {
    width: 55%;
    float: left;
}

.new-home-right {
    float: right;
    width: 40%;
    margin: 0 0 0 5%;
}

@media screen and (max-width: 800px) {
.new-home-left {
    width: 100%;
    float: none;
}

.new-home-right {
	display:none;
}
}