/*
Styles for mitchelldesign.com
Programming by trinixcreative - creative, better (trinixcreative.com)
*/
.panel,a,textarea,input{
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

a{color:#000099;}

html,body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
    line-height: 1.2;
}
body{
    overflow:hidden;
}
.bold{
    font-weight:600;
}
.secondary{
    background-color:rgb(249, 249, 249);
    color:#000;
    height: 100% !important;
    padding-bottom:5%;
    margin-left: 1.3%;
    overflow:auto;
}

.secondary .text{
    margin-top:5%;
    width:80%;
    margin-left:10%;
}
.footer{
    background-color: #252525;
    color:#fff;
    height:8%;
    text-align: center;
    display: table;
    width: 100%;
    min-height:40px;
	position: relative;
}
.footer a{
	color:#fff;
}
.footer a:hover{
	color:#000099;
}
.footer h10{
    display: table-cell;
    vertical-align: middle;
    font-size:14px;
}
.footer img{
	vertical-align: middle;
    height: 80%;
    position: absolute;
    left: 15%;
    top: 10%;
}
.panel{
    height: 100%;
    background-size: cover;
    background-position:center;
}

.home .panel{
    opacity:.6;
    text-align:center;
}
.panel h3{
    margin-top:25%;
    color:#fff;
    text-align:center;
}
.home .panel h3{
    font-weight: 600;
}
.home .panel:hover{
    color:#fff;
    opacity:1 !important;
}

.panels{
    height:92.1%; /* because even numbers dont work */
}

.inspiration{
    background-image: url("/assets/images/creation.jpg");
}
.home .inspiration:hover h3::after{
    content: "\A to Create";
    font-weight:300;
}
.vision{
    background-image: url("/assets/images/vision.jpg");
}
.home .vision:hover h3::before{
    content: "Photographic\A";
    font-weight:300;
}
.origin{
    background-image: url("/assets/images/origin.jpg");
}
.home .origin:hover h3::after{
    content: "al Spirit";
    font-weight:300;
}

.container{
	display:none;
}

html, body, .container{
    height:100%;
}

body{
	background-color:rgb(249, 249, 249);
}

body.home{
    background-color:#000;
}

.head{
    border-image-slice: 0 13 2 13; border-image-width: 0px 0px 0px 13px; border-image-outset: 0px 0px 0px 30px; border-image-repeat: repeat repeat; border-image-source: url("/assets/images/loop.png");
}

.box a{
	color:#fff;
}
.box a:hover{
	color:#000099;
}

.box .client-item{
    display: block;
}

.box .client-item img{
    height: auto;
    width: 80%;
    padding: 5% 10%;
}

.box #coverflow{
	text-align: center;
	position: relative;
	height:80%;
    margin: 0px auto auto;
    width: 50%;
}

.arrow{
	position: absolute;
    top: 40%;
    font-size: 5vh;
    color: #ababab;
    margin: 5%;
    font-weight:bold;
}

.arrow.next{
	right: 0;
	cursor: e-resize;
}

.arrow.prev{
	left: 0;
	cursor: w-resize;
}

.contact img{
    float: right;
}

.box{
    margin-top: 5vh;
    background: url("http://mitchelldesign.trinix.co/assets/images/stripes.png");
    padding: 2vw;
    background-color: #C5C5C5;
    position: relative;
}

.clients{
	background: #b6b6b6;
	text-align:center;
}

textarea.invalid,input.invalid{
    border:1px solid #dd0000!important;
}

.quotes blockquote{
	display: none;
}

.x{
	position: absolute;
    right: 2%;
    top: 2%;
    font-size: 2vw;
    display: block;
    color:#000099;
    text-decoration: none;
    font-weight:100;
}

.x:hover{
	color:#000099;
}

.unslider-carousel img{
/*
    height: 40vh;
    max-height:400px;
*/
    height: auto;
    max-width: 100%;
}

.unslider{
    margin: 0px auto auto;
    position: relative;
}

.fancyblox{
    width: 100%;
    text-align: center;
    display: block;
    margin-top: 5vh;
}
.fancybox-wrap{
    border: 1vw solid rgba(0,0,0,.5);
    border-bottom: 4vh solid rgba(0,0,0,.5)
}
.fancybox-title-float-wrap .child {
    border-radius: 0px;
    width:100%;
    text-shadow:none;
    background-color:transparent;
}
.fancybox-overlay{
    background-color: rgba(0,0,0,.25);
    background-image:none;
}
.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.fancybox-close{
    background-image:none;
    top: -15px;
    right: -38px;
    text-decoration: none;
    color: #fff;
}
.fancybox-close:after{
    content:"X";
}
.fancybox-title-float-wrap{
    width:100%;
}
@media (max-width: 550px){
	.panel{
		height:33%;
	}
	
	.panel h3{
	    margin-top:20%;
	}
	
	.container{
		padding:0;
	}
	
    .contact img {
        padding-top:10px;
        float:none;
        margin: 0 auto;
        display: block;
        border-radius:50%;
    }
}