/* ===  Skeleton #Base 960 Grid  === */

    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 220px; }
    .container .five.columns                    { width: 280px; }
    .container .six.columns                     { width: 340px; }
    .container .seven.columns                   { width: 100%; }
    .container .eight.columns                   { width: 460px; }
    .container .nine.columns                    { width: 520px; }
    .container .ten.columns                     { width: 580px; }
    .container .eleven.columns                  { width: 640px; }
    .container .twelve.columns                  { width: 700px; }
    .container .thirteen.columns                { width: 760px; }
    .container .fourteen.columns                { width: 820px; }
    .container .fifteen.columns                 { width: 880px; }
    .container .sixteen.columns                 { width: 940px; }

    .container .one-third.column                { width: 300px; }
    .container .two-thirds.column               { width: 620px; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 60px;  }
    .container .offset-by-two                   { padding-left: 120px; }
    .container .offset-by-three                 { padding-left: 180px; }
    .container .offset-by-four                  { padding-left: 240px; }
    .container .offset-by-five                  { padding-left: 300px; }
    .container .offset-by-six                   { padding-left: 360px; }
    .container .offset-by-seven                 { padding-left: 420px; }
    .container .offset-by-eight                 { padding-left: 480px; }
    .container .offset-by-nine                  { padding-left: 540px; }
    .container .offset-by-ten                   { padding-left: 600px; }
    .container .offset-by-eleven                { padding-left: 660px; }
    .container .offset-by-twelve                { padding-left: 720px; }
    .container .offset-by-thirteen              { padding-left: 780px; }
    .container .offset-by-fourteen              { padding-left: 840px; }
    .container .offset-by-fifteen               { padding-left: 900px; }

	
	.works
	{		
		overflow: hidden;
		padding: 0px;
		margin: 0px;
		border: 1px solid #f1f1f1;
		min-height: 350px;
		margin-left: 3px;
	}



	
	/* ===  Tablet (Portrait)  === */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
        .container .column,
        .container .columns                         { margin-left: 10px; margin-right: 10px;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
        .alpha.omega                                { margin-left: 0; margin-right: 0; }

        .container .one.column,
        .container .one.columns                     { width: 28px; }
        .container .two.columns                     { width: 76px; }
        .container .three.columns                   { width: 124px; }
        .container .four.columns                    { width: 172px; }
        .container .five.columns                    { width: 220px; }
        .container .six.columns                     { width: 268px; }
        .container .seven.columns                   { width: 316px; }
        .container .eight.columns                   { width: 364px; }
        .container .nine.columns                    { width: 412px; }
        .container .ten.columns                     { width: 460px; }
        .container .eleven.columns                  { width: 508px; }
        .container .twelve.columns                  { width: 556px; }
        .container .thirteen.columns                { width: 604px; }
        .container .fourteen.columns                { width: 652px; }
        .container .fifteen.columns                 { width: 700px; }
        .container .sixteen.columns                 { width: 748px; }

        .container .one-third.column                { width: 236px; }
        .container .two-thirds.column               { width: 492px; }

        /* Offsets */
        .container .offset-by-one                   { padding-left: 48px; }
        .container .offset-by-two                   { padding-left: 96px; }
        .container .offset-by-three                 { padding-left: 144px; }
        .container .offset-by-four                  { padding-left: 192px; }
        .container .offset-by-five                  { padding-left: 240px; }
        .container .offset-by-six                   { padding-left: 288px; }
        .container .offset-by-seven                 { padding-left: 336px; }
        .container .offset-by-eight                 { padding-left: 384px; }
        .container .offset-by-nine                  { padding-left: 432px; }
        .container .offset-by-ten                   { padding-left: 480px; }
        .container .offset-by-eleven                { padding-left: 528px; }
        .container .offset-by-twelve                { padding-left: 576px; }
        .container .offset-by-thirteen              { padding-left: 624px; }
        .container .offset-by-fourteen              { padding-left: 672px; }
        .container .offset-by-fifteen               { padding-left: 720px; }
    }


/*  ===  Mobile (Portrait)  === */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 300px; }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left: 0; }

    }


/* === Mobile (Landscape)  === */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 420px; }
    }


/* ===  Media Queries  === */

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) 
{
	#contact-section
	{
		overflow: hidden;
		padding-top: 150px;
		padding-bottom: 50px;
		background-image: url('../images/twitter.png');
		background-repeat: no-repeat;
		background-position: 80% 0px;
	}
	
	/* Pagination */
	#main
	{
		width: 194px !important;
	}
	
	#holder
	{
		width: 194px !important;
	}
	
	.swControls
	{
		position:absolute;
		top:83% !important;
		left: 183px !important;
	}
	/* end Pagination */
	
	#blog-section .post,#blog-single .post
	{
		margin-bottom: 20px;
	}
	
	#blog-section .post-content, #blog-single .post-content
	{
		width: 246px;
	}
	
	#video a
	{
	position: absolute;
	text-indent: -999999px;
	background-image: url('../images/video/play-btn.png');
	background-repeat: no-repeat;
	width: 72px;
	height: 48px;
	top: 144px;
	left: 147px;
	}

	#video a:hover
	{
		position: absolute;
		text-indent: -999999px;
		background-image: url('../images/video/play-btn-hover.png');
		background-repeat: no-repeat;
		width: 72px;
		height: 48px;
		top: 144px;
		left: 147px;
	}
	
	.project-presentation a.prj-arrow
	{
		margin-right: 4px;
	}

	.project-presentation img.separatory-line
	{
		margin: 0px 6px 0px 3px;
	}
}



/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) 
{

	#nav-div .logo
	{
		display: none;
	}
	
	#nav-div .logo-small
	{
		display: inline-block;
		margin: 8px 0px 0px 180px;
	}
	
	#nav-div .navigation
	{
		float: right;
		padding-top: 5px;
		overflow: hidden;
	}
	
	#nav-div #navig
	{
		background-image: none;
	}
	
	#nav-div ul#nav
	{
		color: #000;
		margin-right: 16px;
		margin-top: 0px;
	}
	
	#nav-div ul#nav li a 
	{
		font-family: "Baskerville Old Face", "Times New Roman", Helvetica, Arial, sans-serif;
		font-size: 20px;
		text-decoration: none;
		margin-left: 18px;
	}

	#nav-div p#nr
	{
		display: none;
	}
	
	#home-section
	{
		height: 355px;	
	}
	
	#about-section .our-service
	{
		margin-bottom: 20px;
	}
	
	#about-section hr
	{
		margin: 25px 0px;
	}
	
	/* Pagination */
	#main
	{
		width: 380px !important;
		margin-top: 30px;
	}
	
	#holder
	{
		width: 380px !important;
	}
	
	.swControls
	{
		position:absolute;
		top:75% !important;
		left: 370px !important;
	}
	/* end Pagination */

	
	.works
	{
		overflow: hidden;
		padding: 50px;
		margin: 0px;
		border: 1px solid #f1f1f1;
		min-height: 350px;
		margin-left: 3px;
	}
	
	.works img.sm
	{
		width:300px; 
		
	}
	
	.works .info
	{
		text-align: center;
		width: 100%;
	}
	
	.works .info h5
	{
		font-size: 13px;
		text-align: center;
	}
	
	.works .info p
	{
		display: none;
	}
	
	.works .info span
	{
		font-size: 11px;
		
	}
	
	.works img.arrow
	{
		margin-right: 2px;
		margin-left: 15px;
		margin-top: 10px;
	}
	
	#blog-section .post, #blog-single .post
	{
		margin-bottom: 20px;
	}
	
	#blog-section .post-image, #blog-single .post-image
	{
		width: 420px;
	}
	
	#blog-section .post-content, #blog-single .post-content
	{
		width: 378px;
		padding: 25px 20px;
		background-color: #FFFFFF;
		border: 1px solid #f1f1f1;
		float: left;
	}
	
	#blog-section div.date, #blog-single div.date
	{
		position: absolute;
		left: 335px;
		top: 150px;
	}
	
	#blog-single textarea.textInput 
	{
		width: 280px;
		margin-top: 35px;
	}

	#video img#video-big
	{
		display: none;
	}
	
	#video img#video-med
	{
		display: inline;
		margin: 10px auto;
	}
	
	#video a,#video a:hover
	{
		position: absolute;
		text-indent: -999999px;
		background-image: url('../images/video/play-btn-med.png');
		background-repeat: no-repeat;
		width: 57px;
		height: 35px;
		top: 157px;
		left: 5px;
	}

	#contact-section
	{
		overflow: hidden;
		padding-top: 150px;
		padding-bottom: 140px;
		background-image: none;
	}
	
	#contact-section .tweet
	{
		display: none;
	}

	#footer p
	{
		margin-bottom: 10px !important;
	}
	
	#footer ul#team
	{
		
	}
	
	#footer .social-icons
	{
		float: left;
	}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) 
{
	#nav-div .logo
	{
		display: none;
	}
	
	#nav-div .logo-small
	{
		display: inline-block;
		margin: 8px 0px 0px 110px;
	}
	
	#nav-div .navigation
	{
		float: right;
		padding-top: 5px;
		overflow: hidden;
	}
	
	#nav-div #navig
	{
		background-image: none;
	}
	
	#nav-div ul#nav
	{
		color: #000;
		margin-right: 16px;
		margin-top: 0px;
	}
	
	#nav-div ul#nav li a 
	{
		font-family: "Baskerville Old Face", "Times New Roman", Helvetica, Arial, sans-serif;
		font-size: 16px;
		text-decoration: none;
		margin-left: 8px;
	}

	#nav-div p#nr
	{
		display: none;
	}

	#home-section
	{
		height: 315px;	
	}
	
	#about-section .our-service
	{
		margin-bottom: 20px;
	}
	
	#about-section hr
	{
		margin: 25px 0px;
	}
	
	/* Pagination */
	#main
	{
		width: 260px;
		margin-top: 30px;
	}
	
	#holder
	{
		width: 260px;
	}
	
	.swControls
	{
		position:absolute;
		top:77% !important;
		left: 250px !important;
	}
	
	/* end Pagination */

	.works
	{
		overflow: hidden;
		padding: 50px;
		margin: 0px;
		border: 1px solid #f1f1f1;
		min-height: 250px;
		margin-left: 3px;
	}
	
	.works img.sm
	{
		width:200px; 
	}
	
	.works .info
	{
		width: 90%;
		text-align: center;
	}
	
	.works .info h5
	{
		font-size: 13px;
		text-align: center;
	}
	
	.works .info p
	{
		display: none;
	}
	
	.works .info span
	{
		font-size: 11px;
		
	}
	
	.works img.arrow
	{
		margin-right: 2px;
		margin-left: 4px;
		margin-top: 10px;
	}
	
	#blog-section .post, #blog-single .post
	{
		margin-bottom: 20px;
	}
	
	#blog-section .post-image, #blog-single .post-image
	{
		width: 420px;
	}
	
	#blog-section .post-content, #blog-single .post-content
	{
		width: 258px;
		padding: 25px 20px;
		background-color: #FFFFFF;
		border: 1px solid #f1f1f1;
		float: left;
	}
	
	#blog-section div.date, #blog-single div.date
	{
		position: absolute;
		left: 210px;
		top: 150px;
	}
	
	#blog-single textarea.textInput 
	{
		width: 280px;
		margin-top: 35px;
	}
	
	#video
	{
	width: 100%;
	height: 90px;
	background-color: #e00000;
	margin: 150px 0px 0px 0px;
	padding: 25px 0px 30px 0px;
	}

	#video p#white
	{
	margin: 0px 0px 5px 0px;
	font-size: 21px;
	color: #fff;
	text-align: center;
	}

	#video p#black
	{
	font-size: 21px;
	color: #000;
	text-align: center;
	margin-bottom: 0px !important;
	}

	#video p#black span
	{
	font-style: italic;
	}

	#video img#video-big
	{
		display: none;
	}
	
	#video img#video-small
	{
		display: inline;
		margin: 10px auto;
	}
	
	#video a,#video a:hover
	{
		position: absolute;
		text-indent: -999999px;
		background-image: url('../images/video/play-btn-small.png');
		background-repeat: no-repeat;
		width: 40px;
		height: 24px;
		top: 69px;
		left: 3px;
	}
	
	#contact-section
	{
		overflow: hidden;
		padding-top: 150px;
		padding-bottom: 50px;
		background-image: none;
	}
	
	#contact-section .tweet
	{
		display: none;
	}
	
	#footer p
	{
		margin-bottom: 15px !important;
	}
	
	#footer ul#team
	{
		display: none;
	}
	
	#footer .social-icons
	{
		float: left;
	}
}