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

/*
    Mosaic - Sliding Boxes and Captions jQuery Plugin
    Version 1.0.1
    www.buildinternet.com/project/mosaic
    
    By Sam Dunn / One Mighty Roar (www.onemightyroar.com)
    Released under MIT License / GPL License
*/

#plate{
	width: 610px;
	height: 250px;
	margin-top:90px;
	float: right;
	margin-right: 51px;
}

#container {
    width: 530px;
    /*max-height: 100% !important;*/
    margin: 0 auto;
    padding: 0px;
	height: 250px;
	overflow: hidden;
}

.jcarousel-scroll{
	width: 500px;
	height: 31px;
}


.thumb-hover {
    position:absolute;
    top: 0;
    left: 0;
    opacity:0;
    filter:alpha(opacity=0);
    z-index: 5;
}

/*General Mosaic Styles*/
#portfolio-thumbnail-container {
    margin-left: 0;
    margin: 0px;
    position:relative;
    clear:both;
	width: 1566px;
	height: 250px;
	overflow: hidden;
	
}



#portfolio-thumbnail-container li {
    display:block;
    margin-left: 0 !important;
    margin-right: 0px;
    list-style: none;
    width: 166px;
    float:left; 
	height: 138px;
	margin-right: 16px;
	
}


#portfolio-thumbnail-container li:last-child {
    margin-right: 0px;
}
.mosaic-block {
    float:left;
    position:relative;
    overflow:hidden;
    width:166px;
    height:138px;
    margin-bottom: 10px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-box-shadow: -1px -1px 2px #ffffff;
    -moz-box-shadow: -1px -1px 2px #ffffff;
    box-shadow: -1px -1px 2px #ffffff;
	
}

.mosaic-block:hover {
    -webkit-box-shadow: -1px -1px 60px #ffffff;
    -moz-box-shadow: -1px -1px 60px #ffffff;
    box-shadow: -1px -1px 60px #ffffff;
    z-index: 2;
}


    #portfolio-thumbnail-container details {
        margin-top: 10px;
        display: block;
    }
	
	a.prev{
	background: url(images/prev.gif) no-repeat;
	height: 31px;
	width: 31px;
	display: block;
	float:left;
	margin-top: 57px;
	 		opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
}
a.next{
    cursor: pointer;
	background: url(images/next.gif)no-repeat;
	height: 31px;
	width: 31px;
	display: block;
	float: right;
	margin-top: 57px;
	  		opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
}

a.next:hover{
	opacity: .6;
}

a.prev:hover{
	opacity: .6;
}
    
	/********************************************title of work******************************************************/
    #portfolio-thumbnail-container summary{
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 14px;
    color: 414142;
	font-weight:100;
    margin-bottom: 3px;
    }
    
	
	/***********************************small text describing logo**********************************************/
    #portfolio-thumbnail-container p{
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 10px;
    color: #595A5C;
    margin-bottom: 8px;
	 margin-top: 2px;
    }
	
	#portfolio-thumbnail-container p.describe{
    font-family: "Helvetica", Arial, sans-serif;
    font-size: 11px;
    color: #818181;
    margin-bottom: 8px;
	 margin-top: 2px;
	 width: 170px;
	 height: auto;
    }
    

    
        /*** Custom Animation Styles (You can remove/add any styles below) ***/
        .circle .mosaic-overlay {
            background: url(images/portfolio/zoom.png) no-repeat center center;
            opacity:0;
			width: 166px;
			height: 138px;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
        }
        
        .fade .mosaic-overlay {
            opacity:0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=00)";
            filter:alpha(opacity=00);
            
			
        }
        
        .bar .mosaic-overlay {
            bottom:-100px;
            height:100px;
           
        }
        
        .bar2 .mosaic-overlay {
            bottom:-50px;
            height:100px;
            opacity:0.8;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
            filter:alpha(opacity=80);
        }
        
            .bar2 .mosaic-overlay:hover {
                opacity:1;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
                filter:alpha(opacity=100);
            }
        
        .bar3 .mosaic-overlay {
            top:-100px;
            height:100px;
            
        }
        /*** End Animation Styles ***/
    
/*  --------------------------------------------------
    Reveal Modals
    -------------------------------------------------- */
        
	/********************reveal in lightbox*************************/
	
    .reveal-modal-bg { 
        position: fixed; 
        height: 100%;
        width: 100%;
        background-color: #3f3f3f;  /*background color.  Can also give background image*/
        z-index: 100;
        display: none;
        top: 0;
        left: 0;
        opacity: .95; /*opacity mode*/
        }
    
    .reveal-modal {
        visibility: hidden;
        top: 0px; /*height from top*/ 
        left: 50%; /*keep it centered*/
		margin-left: -340px;  /*position of the lightbox*/
        width: 600px;
        background-color: transparent;
        /*background:url(images/yellow_paper_pattern.jpg) top left repeat;*/
        position: absolute;
        z-index: 101;
        padding: 0px 40px 34px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
		padding-bottom: 0px;
    /*-webkit-box-shadow: -1px -1px 1px #ffffff;
    -moz-box-shadow: -1px -1px 1px #ffffff;
    box-shadow: -1px -1px 1px #ffffff;*/
        }
        
    .reveal-modal.small         { width: 200px; margin-left: -140px;}
    .reveal-modal.medium        { width: 400px; margin-left: -240px;}
    .reveal-modal.large         { width: 600px; margin-left: -340px;}
    .reveal-modal.xlarge        { width: 800px; margin-left: -440px;}
    
	
	/*************************************Closing the lightbox and cross***************************************/
    .reveal-modal .close-reveal-modal {
    
        display:block;
        height: 50px;
		font-size: 30px;
        width: 50px;
        position: relative;
        top: 55px;
       	left: 575px;
        color: #D1D3D4;
        font-weight: bold;
        cursor: pointer;
        z-index: 999;
        text-decoration: none !important;
        }
        
        .close-reveal-modal {
        font-size: 50px;
	
        }
        
		/*******************************************the real information in lightbox****************************************/
        .reveal-modal {
    color: #FFFFFF;
    font-size: 12px;
    line-height: 12px;
    font-family: "Helvetica",Arial, sans-serif;
	line-height: 15px;

	}
        .reveal-modal p {
            padding-bottom: 0px;
			margin-top: 2px;
			margin-bottom: 10px;
        }
        
        
		/************************title for example year**********************************/
        .reveal-modal h3 {
            color: #5CA2BE;
            font-size: 16px;
            letter-spacing: 1px;
            font-weight: 500;
            padding-bottom: 0px;
           margin: 0px;
        }
        
        .reveal-modal a{
            color: #FFFFFF;
            text-decoration: none;
            -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;
        }
        .reveal-modal a:hover{
        color: #06A2C6;
        text-shadow: 1px 1px 1px #105487;
        }
        
        
        .reveal-modal article {
        min-height: 160px;
		left: 40px;
position: absolute;
        /*-moz-column-count: 2;
        -moz-column-gap: 30px;
        -webkit-column-count: 2;
        -webkit-column-gap: 30px;
        column-count: 2;
        column-gap: 30px;*/ 
        }
        
		
		/*******************************COLUMN LEFT*************************************/
        .project-details{
            width: 240px;
            float: left;
			padding-right:10px;
			
        }
		
		/*********************************COLUMN RIGHT**********************************/
        .project-summary {
            width: 310px;
            float: left;
			padding-left: 29px;
			border-left: 1px dashed #F1F2F2;
        }
    /*
        
    NOTES
    
    Close button entity is ×
    
    Example markup
    
    <div id="myModal" class="reveal-modal">
        <h2>Awesome. I have it.</h2>
        <p class="lead">Your couch.  I it's mine.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
        <a class="close-reveal-modal">&#215;</a>
    </div>
    
    */
    
/*
 * jQuery Nivo Slider v2.5.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
 
 
/*
 * jQuery Nivo Slider v2.5.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * March 2010
 */
 
 
/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    background-color: #f0f0f0;
    background-position:50% 50%;
    background-repeat:no-repeat;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:9;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}

/**************custom nivo***************************/

#slider-wrapper {
    width:600px;
    height:325px;
    margin:0 auto;
    -webkit-box-shadow: -1px -1px 60px #ce9d28;
    -moz-box-shadow: -1px -1px 60px #ce9d28;
    box-shadow: -1px -1px 60px #ce9d28;
    margin-bottom: 50px;
    clear:both;
}

.slider-wrapper {
    width:600px;
    min-height: 325px;
    margin:0 auto;
    -webkit-box-shadow: -1px -1px 60px #ce9d28;
    -moz-box-shadow: -1px -1px 60px #ce9d28;
    box-shadow: -1px -1px 60px #ce9d28;
    margin-bottom: 30px;
    padding-bottom: none !important;
    background-color: #f0f0f0;
    background-image: url(images/progress.gif);
    background-position:50% 50%;
    background-repeat:no-repeat;
}

.slider-wrapper img, .slider-wrapper iframe{
    margin-bottom: -5px !important;
}

.sliderstyling {
    width:600px;
    height:325px;
    margin:0 auto;
	
	/***********************************GLOW AROUND IMAGE*******************************************/
    -webkit-box-shadow: -1px -1px 60px #5CA2BE;
    -moz-box-shadow: -1px -1px 60px #5CA2BE;
    box-shadow: -1px -1px 60px #5CA2BE;
    margin-bottom: 25px;
    background-color: #f0f0f0;
 
    background-position:50% 50%;
    background-repeat:no-repeat;
}

#slider {
    position:relative;
    width:600px;
    height:325px;
   
}
#slider img, .sliderstyling img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a, ..sliderstyling img {
    border:0;
    display:block;
}

.nivo-controlNav {
    position:absolute;
    left:260px;
    bottom:-42px;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-color: transparent;
    background-position:0px -22px;
    
}

.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background: url(images/portfolio/arrows2.png) no-repeat;
    text-indent:-9999px;
    border:0;
            -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;
}
.nivo-directionNav a:hover {
    opacity: .50;
}

a.nivo-nextNav {
    background-position:-30px 0;
    right:-50px;
}
a.nivo-prevNav {
    left:-50px;
}

.nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a { 
    color:#efe9d1;
    text-decoration:underline;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
    clear:both;
}


/* Localized */