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

.viewport {
	border: 3px solid #eee;
	margin: 0 5px 9px 0;
	overflow: hidden;
	position: relative;
	width: 260px;
    height: 350px;
    /*background-color: yellow;*/
    box-shadow: 2px 2px 2px #888888;
	border-radius:2px;
    }

	/* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar
	   class to the last thumbnail in each row to get rid of the margin-right. */
	.no-margin {
		margin-right: 0;
     }

        /* --- Link configuration that contains the image and label ----------------------------- */
        .viewport a {
            display: block;
            position: relative;
        }

        .viewport a img {
            /*height: 332px;*/
            left: 10px;
            position: relative;
            top: 10px;
			text-align:center;
            /*width: 500px;*/
        }

        /* --- Label configuration -------------------------------------------------------------- */
        .viewport a span {
            display: none;
           
            height: 350px;
            
            position: absolute;
          		  font-size: 12px;
            font-weight: bold;
			text-align:center;
			 padding: 0px 5px 0 5px;
            text-decoration: none;
            width: 250px;
            z-index: 100;
			
        }
		.viewport a span p{

			
		}
            .viewport a span em {
                display: block;
                font-size: 0.45em;
                font-weight: normal;
            }

        /* --- Dark hover background ------------------------------------------------------------ */
        .dark-background {
            background-color: rgba(15, 15, 15, 0.6);
            color: #fff;
            text-shadow: #000 0px 0px 20px;
			
        }
            .dark-background em {
                color: #ccc;
            }

        /* --- Light hover background ----------------------------------------------------------- */
        .light-background {
            background-color: rgba(255, 255, 255, 0.6);
            color: #333;
            text-shadow: #fff 0px 0px 20px;
        }
            .light-background em {
                color: #707070;
            }

        /**
         * You could create multiple hover background classes for different looks depending on the
         * image type. Use your imagination!
         */

/** practice areas styles start **/
.practice-areas {
	width:100%;
	margin:50px auto 0 auto;
	
}
 
.practice-areas  h1{
	text-align:center;
	color:#597ba0;
	font-size:36px;
	font-family: 'Open Sans', sans-serif;
}

.practice-text-heading	{
	text-align:center;
	font:14px;
	font-family: 'Open Sans', sans-serif;
	color:#597ba0;
}
.practice-text-heading22 img	{
	margin-left:10px;
}

.practice-text {
	font-size:12px;
	padding:0 20px 0 5px;
	/*text-align:center;*/
	font-family: 'Open Sans', sans-serif;
	text-align:center;
}

.practice-text a {
	font-size:12px;
	padding:0 5px 0 5px;
	text-decoration:none;
	font-family: 'Open Sans', sans-serif;
}

.parts {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	overflow:hidden;

	}

.box1 {
	float:left;
	width:300px;
}

.box2 {
	float:left;
	width:300px;
	margin:0 0 0 50px;
}

.heading {
	font-size:18px;
	font-family: 'Open Sans', sans-serif;
}