/* #Media Specifications
================================================== */

/* Smaller than standard 1200 */
@media only screen and (max-width: 1299px) {
}

/* Small Screen size to standard 1200 */
@media only screen and (min-width: 1000px) and (max-width: 1299px) {
	.copyright {
		font-size: 9px;
	}
	#Section-01 .background:before {
		top: -78px;
		background-image: url(../images/before-s1-1300.png);
		height: 78px;
	}
	#Section-02 .background:before {
		top: -83px;
		background-image: url(../images/before-s2-1300.png);
		height: 83px;	
	}
	#Section-03 .background:before {
		top: -74px;
		background-image: url(../images/before-s3-1300.png);
		height: 74px;	
	}
	.circlesThree li {
		width: 217px;
	}
	.circlesThree li:hover h2 {
		line-height: 217px;
	}
}

/* Smaller than standard 960 */
@media only screen and (max-width: 999px) {
	
	.gallery {
		margin: -15px 0 0 -15px;
	}
	.gallery li {
		margin: 15px 0 0 15px;
	}
	.gallery-02 li {
		width: -webkit-calc(100% / 1 - 15px);
		width: -moz-calc(100% / 1 - 15px);
		width: calc(100% / 1 - 15px);
	}
	.gallery-03 li {
		width: -webkit-calc(100% / 3 - 15px);
		width: -moz-calc(100% / 3 - 15px);
		width: calc(100% / 3 - 15px);
	}
	.gallery-04 li {
		width: -webkit-calc(100% / 3 - 15px);
		width: -moz-calc(100% / 3 - 15px);
		width: calc(100% / 3 - 15px);
	}
}

/* Tablet Portrait size to standard 960 */
@media only screen and (min-width: 768px) and (max-width: 999px) {
	.navigation a,
	.navigation a:visited {
		padding: 2px 7px;
	}
	.circlesThree h2 {
		font-size: 13px;
		padding: 5px 0 25px;
	}
	.copyright li + li a::before {
		padding: 0 2px;
	}
	.area {
		width: 180px;
	}
	.area h2 {
		font-size: 11px;
		line-height:20px;
	}
	.area h1,
	.area h1 a,
	.area h1 a:visited,
	.area2 h1 {
		font-size: 23px;
		line-height: 25px;
	}
	#Section-03 img,
	#Section-04 img {
		width: 180px;
	}
	#Section-03 .content {
		margin-left: 220px;
	}
	#Section-03 img {
		margin-left: -220px;
	}
	#Section-01 .background:before {
		top: -64px;
		background-image: url(../images/before-s1-1000.png);
		height: 64px;
	}
	#Section-02 .background:before {
		top: -64px;
		background-image: url(../images/before-s2-1000.png);
		height: 64px;	
	}
	#Section-03 .background:before {
		top: -57px;
		background-image: url(../images/before-s3-1000.png);
		height: 57px;	
	}
}

/* Tablet Portrait size to standard 1200 */
@media only screen and (min-width: 768px) and (max-width: 1299px) {
}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {
	.logo {
		position: fixed;
		padding: 0;
		top: 0;
		right: 0;
		left: 0;
		background: #FFF;
		-webkit-box-shadow: 0 0 4px #000;
		-moz-box-shadow: 0 0 4px #000;
		box-shadow: 0 0 4px #000;
		width: auto;
		z-index: 10000;
		padding: 0;
	}
	
	.headerActivated .logo {
		width: 100%;
		padding: 0;
	}
	.logo a {
		float: left;
		width: 200px;
		left: 50%;
		margin-left: -210px;
		position: relative;
		padding: 5px 0;
	}
	.logo a img {
		height: 50px;
		width: auto;
		max-width: none;
	}
	#NavigationTrigger {
		float: right;
		width: 60px;
		height: 60px;
		background: url(../images/nav.png) right no-repeat;
		right: 50%;
		margin-right: -210px;
		display: block;
		text-indent: -9999px;
		position: relative;
		cursor: pointer;
	}
	header {
		position: relative;
		height: 0;
		background: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	.navigation {
		float: none;
		width: 420px;
	}
	.headerActivated .navigation,
	.navigation {
		padding-top: 60px;
	}
	.navigation ul {
		float: none;
		background: rgba(255, 255, 255, 0.8);
		-webkit-box-shadow: 0 0 4px #000;
		-moz-box-shadow: 0 0 4px #000;
		box-shadow: 0 0 4px #000;
		margin: auto;
		padding: 5px 0;
		display: none;
		position: absolute;
	}
	.navigation li {
		float: none;
		display: block;
		text-align: right;
		padding: 0 5px;
	}
	#MainSection .content {
		padding: 10px 15px;
		margin-top: 145px;
	}
	.twoColumns {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
	}
	.gallery {
		margin: -10px 0 0 -10px;
		list-style: none;
	}
	.gallery li {
		margin: 10px 0 0 10px;
	}
	.internal footer,
	.push {
		height: auto
	}
	#MainSection {
		min-height: 100%;
		margin: 0 auto; /* the bottom margin is the negative value of the footer's height */
	}
	.area {
		padding: 65px 0 5px;
		width: 100%;
		left: auto;
		position: relative;
	}
	.area2 {
		padding: 10px 15px 70px;
		width: 100%;
		box-sizing: border-box;
		right: auto;
		text-align: center;
		position: relative;
	}
	.area h2 {
		font-size: 11px;
	}
	.area2 h1 {
		font-size: 14px;
		line-height: 24px;
	}
	.backstretch {
		position: fixed !important; 
	}
	.copyright {
		text-align: center;
		float: none;
	}
	.copyright ul {
		text-align: center;
	}
	.copyright li {
		display: inline-block;
		float: none;
	}
	
	#Section-03 img,
	#Section-04 img {
		width: 120px;
		margin: 0 0 20px 20px;
	}
	#Section-03 img {
		margin: 0 20px 20px 0;
	}
	#Section-04 {
		height: auto;
		min-height: 0;
	}
	#Section-04 .background {
		height: auto;
		position: relative;
	}
	#Section-04 .wrap {
		display: block;
	}
	#Section-04 .container {
		display: block;
	}
	#Section-04 .content {
		margin: 70px 0;
	}
	ul.formList li.label {
		width: 100%;
		padding: 3px 0 0;
		text-align: left;
	}
	ul.formList li.field {
		width: 100%;
		padding: 0 0 3px;
	}
	ul.formList li.button,
	ul.formList li.noLabel {
		width: 100%;
		margin-left: auto;
	}
}

/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.gallery-02 li {
		width: -webkit-calc(100% / 1 - 15px);
		width: -moz-calc(100% / 1 - 15px);
		width: calc(100% / 1 - 15px);
	}
	.gallery-03 li {
		width: -webkit-calc(100% / 2 - 10px);
		width: -moz-calc(100% / 2 - 10px);
		width: calc(100% / 2 - 10px);
	}
	.gallery-04 li {
		width: -webkit-calc(100% / 2 - 10px);
		width: -moz-calc(100% / 2 - 10px);
		width: calc(100% / 2 - 10px);
	}
	.navigation ul {
		width: 420px;
	}
	#Section-01 .background:before {
		top: -54px;
		background-image: url(../images/before-s1-768.png);
		height: 54px;
	}
	#Section-02 .background:before {
		top: -48px;
		background-image: url(../images/before-s2-768.png);
		height: 48px;	
	}
	#Section-03 .background:before {
		top: -44px;
		background-image: url(../images/before-s3-768.png);
		height: 44px;	
	}
}

/* Mobile Portrait Size to Mobile Landscape Size  */
@media only screen and (max-width: 479px) {
	.logo a {
		margin-left: -150px;
	}
	#NavigationTrigger {
		margin-right: -150px;
	}
	.navigation {
		float: none;
		width: 300px;
	}
	.navigation ul {
		width: 300px;
	}
	.gallery-02 li {
		width: -webkit-calc(100% / 1 - 15px);
		width: -moz-calc(100% / 1 - 15px);
		width: calc(100% / 1 - 15px);
	}
	.gallery-03 li {
		width: -webkit-calc(100% / 1 - 10px);
		width: -moz-calc(100% / 1- 10px);
		width: calc(100% / 1 - 10px);
	}
	.gallery-04 li {
		width: -webkit-calc(100% / 1 - 10px);
		width: -moz-calc(100% / 1 - 10px);
		width: calc(100% / 1 - 10px);
	}
	#Section-04 .content {
		padding: 15px;
	}
	#Section-01 .background:before {
		top: -35px;
		background-image: url(../images/before-s1-480.png);
		height: 35px;
	}
	#Section-02 .background:before {
		top: -31px;
		background-image: url(../images/before-s2-480.png);
		height: 31px;	
	}
	#Section-03 .background:before {
		top: -28px;
		background-image: url(../images/before-s3-480.png);
		height: 28px;	
	}
}