/********************************************************************************************* 

x. Basic Setup (Body, Fonts, etc.) 

*********************************************************************************************/
@media only screen and (max-width:1300px) {
	h1 {
		font-size: 90px;
	}
	.wrapper.large {
		width: auto;
		margin: 0 50px;
	}
}
@media only screen and (max-width:1200px) {
	h1 {
		font-size: 80px;
	}
	h2 {
		font-size: 70px;
	}
}
@media only screen and (max-width:1110px) {
	.wrapper.large,
	.wrapper.medium {
		width: auto;
		margin: 0 30px;
	}
}
@media only screen and (max-width:940px) {
	.font-size-large,
	h6 {
		font-size: 20px;
	}
	h1 {
		font-size: 60px;
	}
	h2 {
		font-size: 50px;
	}
	h3 {
		font-size: 40px;
	}
	h4 {
		font-size: 30px;
	}
	h5 {
		font-size: 24px;
	}
	.wrapper.small {
		width: auto;
		margin: 0 30px;
	}
}
@media only screen and (max-width:600px) {
	html,body {
		font-size: 16px;
	}
	.font-size-large,
	h6 {
		font-size: 18px;
	}
	h1 {
		font-size: 50px;
	}
	h2 {
		font-size: 40px;
	}
	h3 {
		font-size: 30px;
	}
	h4,
	h5 {
		font-size: 20px;
	}
}
@media only screen and (max-width:600px) {
	h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 35px;
	}
	h3 {
		font-size: 30px;
	}
}
@media only screen and (max-width:400px) {
	h1 {
		font-size: 35px;
	}
	h2 {
		font-size: 30px;
	}
	h3 {
		font-size: 25px;
	}
}


/********************************************************************************************* 

x. bxSlider

*********************************************************************************************/
@media only screen and (max-width:940px) {
	.bxslider-carousel-wrapper .bx-wrapper .bx-next {
		right: 0;
	}
	.bxslider-carousel-wrapper .bx-wrapper .bx-prev {
		left: 0;
	}
}
@media only screen and (max-width:710px) {
	.bxslider-carousel-wrapper {
		padding: 0 30px;
	}
}
@media only screen and (max-width:600px) {
	.bxslider-carousel-wrapper .bx-wrapper.first,
	.bxslider-carousel-wrapper .bx-wrapper.fourth {
		display: none;
	}
}
@media only screen and (max-width:500px) {
	.bx-wrapper .bx-controls-direction a {
		width: 40px; height: 40px;
	}
	.bx-wrapper .bx-controls-direction svg {
		width: 10px; height: 100%;
	}
	.bx-wrapper .bx-pager {
		display: none;
	}
}

/********************************************************************************************* 

x. Button

*********************************************************************************************/
@media only screen and (max-width:600px) {
	.button {
		font-size: 12px;
	}
}


/********************************************************************************************* 

x. Footer

*********************************************************************************************/
@media only screen and (max-width:940px) {
	footer {
		padding: 50px 0;
	}
	footer .column {
		text-align: center;
		margin: 0;
		display: block;
	}
	footer .columns {
		margin: 0;
	}
	footer .logo {
		margin: 0 auto;
	}
	footer .navigation.center {
		margin: 30px 0;
	}
}
@media only screen and (max-width:600px) {
	footer {
		padding: 30px 0;
	}
	footer .logo {
		max-width: 50px;
	}
}

/********************************************************************************************* 

x. Form

*********************************************************************************************/
@media only screen and (max-width:1024px) {
	form input,
	form textarea {
	    border-radius: 0;
	    -webkit-appearance: none;
	}
}

/********************************************************************************************* 

x. Header

*********************************************************************************************/
@media only screen and (max-width:1300px) {
	header .hamburger {
		left: 50px;
	}
}
@media only screen and (max-width:940px) {
	header .navigation a {
		font-size: 30px;
	}
}
@media only screen and (max-width:600px) {
	header .navigation a {
		font-size: 20px;
	}
}
@media only screen and (max-width:500px) {
	header .hamburger {
		width: 25px;
		top: 30px; left: 30px;
	}
}

/********************************************************************************************* 

x. Icon

*********************************************************************************************/
@media only screen and (max-width:600px) {
	.icon svg {
		width: 70px; height: 70px;
	}
}
@media only screen and (max-width:400px) {
	.icon svg {
		width: 40px; height: 40px;
	}
}

/********************************************************************************************* 

x. Section

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	section:last-of-type,
	section.extra-padding-bottom {
		padding-bottom: 100px;
	}
	section.extra-padding-top {
		padding-top: 100px;
	}
}
@media only screen and (max-width:940px) {
	section {
		padding: 50px 0;
	}
}
@media only screen and (max-width:600px) {
	section {
		padding: 30px 0;
	}
	section:last-of-type,
	section.extra-padding-bottom {
		padding-bottom: 50px;
	}
	section.extra-padding-top {
		padding-top: 50px;
	}
}

/********************************************************************************************* 

x. Section - Anchor Links

*********************************************************************************************/
@media only screen and (max-width:800px) {
	.anchor-links .links {
		margin: 0 0 -15px 0;
	}
	.anchor-links .links a {
		font-size: 14px;
	}
	.anchor-links .links li {
		margin: 0 15px 15px 0;
		padding: 0 15px 0 0;
	}
}
@media only screen and (max-width:600px) {
	.anchor-links .links a {
		font-size: 12px;
	}
}
@media only screen and (max-width:500px) {
	.anchor-links .links li {
		border-right: none;
		margin: 0 0 30px 0;
		padding: 0;
		display: block;
	}
}

/********************************************************************************************* 

x. Section - Carousel

*********************************************************************************************/
@media only screen and (max-width:1300px) {
	.carousel .wrapper.large {
		margin: 0;
	}
}


/********************************************************************************************* 

x. Section - Certifications

*********************************************************************************************/
@media only screen and (max-width:940px) {
	.certification table .image img {
		max-width: 150px;
		max-height: 150px;
	}
	.certification .wrapper {
		padding: 50px 0 0 0;
	}
}
@media only screen and (max-width:600px) {
	.certification table td {
		text-align: center;
		display: block;
	}
	.certification table td:first-of-type .image,
	.certification table td:last-of-type .image {
		display: none;
	}
	.certification .wrapper {
		padding: 30px 0 0 0;
	}
}


/********************************************************************************************* 

x. Section - Grid Of Images

*********************************************************************************************/
@media only screen and (max-width:700px) {
	.grid-of-images .grid {
		margin: -30px -15px;
	}
	.grid-of-images .grid .inside {
		padding: 30px 15px;
	}
}
@media only screen and (max-width:600px) {
	.grid-of-images .grid .image {
		width: 100%;
	}
	.grid-of-images .grid .image img {
		max-width: 150px;
		margin: 0 auto;
	}
	.grid-of-images .grid {
		margin: -15px 0;
	}
	.grid-of-images .grid .inside {
		padding: 15px 0;
	}
}
@media only screen and (max-width:400px) {
	.grid-of-images .grid .image img {
		max-width: none;
	}
}

/********************************************************************************************* 

x. Section - List

*********************************************************************************************/
@media only screen and (max-width:900px) {
	.list .column {
		width: 100%;
		float: none;
	}
	.list .columns {
		margin: 0;
	}
	.list .column:first-of-type .inside {
		padding: 0 0 50px 0;
	}
	.list .column:first-of-type .inside:after {
		width: 100%; height: 3px;
		top: auto; left: 0;
	}
	.list .column:last-of-type .icon {
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}
	.list .column:last-of-type .inside {
		text-align: center;
		padding: 50px 0 0 0;
	}
	.list .column:last-of-type p {
		padding: 0;
	}
}

/********************************************************************************************* 

x. Section - Map

*********************************************************************************************/
@media only screen and (max-width:800px) {
	#map {
		height: 600px;
	}
}

/********************************************************************************************* 

x. Section - Masthead

*********************************************************************************************/
@media only screen and (max-width:1110px) {
	.masthead .wrapper {
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-o-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
		left: 0; right: 0;
	}
}
@media only screen and (max-width:1000px) {
	.masthead .logo {
		width: auto; height: 140px;
	}
	.masthead .wrapper {
		top: 190px;
	}
}
@media only screen and (max-width:600px) {
	.masthead .logo {
		height: 100px;
	}
	.masthead .wrapper {
		top: 150px;
	}
}
@media only screen and (max-width:500px) {
	.masthead .logo {
		padding: 30px 0 0 0;
	}
	.masthead .wrapper {
		top: 130px;
	}
}
@media only screen and (max-width:400px) {
	.masthead {
		min-height: 500px;
	}
	.masthead .arrow {
		display: none;
	}
}

/********************************************************************************************* 

x. Section - Posts

*********************************************************************************************/
@media only screen and (max-width:1110px) {
	.posts .post .column.second .inside {
		padding: 50px;
	}
}
@media only screen and (max-width:940px) {
	.posts .post .column.second .inside {
		padding: 30px;
	}
	.posts .post:first-of-type .column.second .inside {
		padding-top: 50px;
	}
	.posts .post:last-of-type .column.second .inside {
		padding-bottom: 50px;
	}
}
@media only screen and (max-width:800px) {
	.posts .post .column {
		width: 100%;
	}
	.posts .post .column.first {
		position: relative;
	}
	.posts .post .column.first .background {
		width: 100%; height: 300px;
		position: relative;
	}
}

/********************************************************************************************* 

x. Section - Recent Posts

*********************************************************************************************/
@media only screen and (max-width:940px) {
	.recent-posts .columns {
		margin: 0 -50px;
	}
	.recent-posts .inside {
		padding: 0 50px;
	}
}
@media only screen and (max-width:800px) {
	.recent-posts .column {
		width: 100%;
		float: none;
	}
	.recent-posts .columns {
		margin: 0;
	}
	.recent-posts .column:first-of-type .inside {
		padding: 0 0 50px 0;
	}
	.recent-posts .column:first-of-type .inside:after {
		width: 100%; height: 3px;
		top: auto; left: 0;
	}
	.recent-posts .column:last-of-type .inside {
		text-align: center;
		padding: 50px 0 0 0;
	}
}


/********************************************************************************************* 

x. Section - Text

*********************************************************************************************/
@media only screen and (max-width:940px) {
	.text .columns {
		margin: 30px -30px 0 -30px;
	}
	.text .columns .inside {
		padding: 0 30px;
	}
}
@media only screen and (max-width:700px) {
	.text .column {
		text-align: center;
		width: 100%;
	}
	.text .column:first-of-type {
		margin: 0 0 30px 0;
	}
}


/********************************************************************************************* 

x. Section - Video

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	.video .column.first .inside,
	.video .column.second .content {
		padding: 0 50px;
	}
	.video .icon svg {
		width: 70px; height: 70px;
	}
}
@media only screen and (max-width:940px) {
	.video .column.first .inside,
	.video .column.second .content {
		padding: 0 30px;
	}
}
@media only screen and (max-width:700px) {
	.video {
		padding-bottom: 0 !important;
	}
	.video .column {
		width: 100%;
	}
	.video .column.first .inside {
		text-align: center;
		padding: 0 30px 50px 30px;
	}
	.video .column.second {
		padding: 100px 0;
		position: relative;
	}
	.video .column.second .content {
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0);
		-o-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		position: relative;
		top: 0;
	}
}