/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

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

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (min-width: 768px) {
		#menu-main-nav {
			display: block !important;
		}
	}

	@media only screen and (max-width: 767px) {
		.desktop {
			display: none !important;
		}

		.mobile {
			display: block;
		}

		h1,
		.h1 {
			font-size: 36px;
			line-height: 44px;
		}
		h2,
		.h2 {
			font-size: 22px;
			line-height: 32px;
		}
		h3,
		.h3 {
			font-size: 24px;
			line-height: 27px;
			margin: 30px 0px 20px 0px;
		}
		h4,
		.h4 {
			font-size: 20px;
			line-height: 30px;
		}
		h5,
		.h5 {
			font-size: 13px;
			line-height: 24px;
		}
		
		ul li,
		ol li {
		    font-size: 16px;
		    font-weight: normal;
		    line-height: 24px;
		    /* line-height: 18px; */
		    margin-bottom: 12px;
		}

		/***** MAIN NAV MENU *****/
		nav {
			height: 80px;
			left: 0px;
			top: 0px;
		}
		nav .logo-nav {
			height: 50px;
			padding-top:15px;
		}
		nav .logo-nav a {
			background: url('../images/logo-claudio.png') no-repeat 0 18px transparent;
			height: 50px;
		}
		.menu-toggle {
			color: #7c7d7d;
			cursor: pointer;
			font-size: 30px;
			position: absolute;
			right: 0px;
			top: 40px;
		}
		.menu-toggle:hover {
			color: #31a0d8;
		}
		#menu-main-nav {
			display: none;
		}

		nav .site-nav {
			background: #ffffff;
			display: block;
			left: 0;
			padding-top: 0px;
			position: absolute;
			top: 81px;
			width: 100%;
			z-index: 100;
		}
		nav .site-nav ul {
			margin: 0;
		}
		nav .site-nav li {
			display: block;
			float: none;
			height: 36px;
			margin: 0;
			border-bottom: 1px solid #e3e3e3;
			border-left: 1px solid #e3e3e3;
			border-right: 1px solid #e3e3e3;
		}
		nav .site-nav li a {
			display: block;
			padding: 10px;
		}
		nav .site-nav a {
			color: #7d7d7d;
			text-decoration: none;
			-webkit-transition: color 0.2s ease-out;
			-moz-transition: color 0.2s ease-out;
			-o-transition: color 0.2s ease-out;
			transition: color 0.2s ease-out;
		}
		nav .site-nav a:active,
		nav .site-nav a:hover,
		nav .site-nav a.active {
			color: #31a0d8;
		}
		nav .site-nav li.navigation a .backside {
			color: #7d7d7d;
			position: relative;
			top: 0px;
		}
		nav .site-nav li.navigation:hover a .backside,
		nav .site-nav li.navigation a.active .backside {
			position: relative;
			top: 0;
			color: #31a0d8;
		}
		nav .site-nav li.navigation a .frontside {
			display: none;
		}
		nav .site-nav li.navigation:hover a .frontside,
		nav .site-nav li.navigation a.active .frontside {
			display: none;
		}

		/***** MAIN NAV MENU: Scrolled *****/
		.is-nav-scroll .logo-nav {
			padding-top: 15px;
		}
		.is-nav-scroll .site-nav {
			padding-top: 0px;
		}

		/***** HERO *****/
		section.hero {
			margin-top: 80px;
			padding-bottom: 30px;
		}
		section.hero p {
			font-size: 13px;
			margin-top: 0px;
		}

		/***** WHAT WE DO *****/
		section.what-we-do {
			background-image: url('../images/about-mobile.png');
			background-position: 50% 0;
			background-repeat: no-repeat;
			background-size: cover;
			background-color: #31a0d8;
			height: auto;
			margin-top: 0px;
			padding-bottom: 40px;
			padding-top: 20px;
		}
		section.what-we-do h2 {
			/*color: #333333;*/
			padding-top: 40px;
		}
		section.what-we-do p {
			/*color: #333333;*/
			margin-top: 25px;
		}

		/***** HOW WE DO IT *****/
		section.how-we-do-it {
			background: none;
			background-color: #333333;
			height: auto;
			padding-bottom: 40px;
		}
		section.how-we-do-it h2 {
			/*color: #333333;*/
			padding-top: 40px;
		}
		section.how-we-do-it h4,
		section.how-we-do-it .h4 {
			/*color: #333333;*/
			margin-bottom: 20px;
		}
		section.how-we-do-it p {
			/*color: #333333;*/
			margin-top: 5px;
		}

		/***** PARTNERSHIPS *****/
		section.partnerships {
			padding-bottom: 40px;
		}
		section.partnerships h2 {
			padding: 40px 0px 0px 0px;
		}
		section.partnerships p {
			padding: 0px 0px 0px 0px;
			text-align: left;
		}
		section.partnerships span {
			display: inline;
		}

		/***** EXPERIENCE *****/
		section.experience {
			background: none;
			background-color: #d0d0d0;
			height: auto;
			margin-top: 0px;
			padding-bottom: 40px;
			padding-top: 40px;
			text-align: left;
		}
		section.experience h2 {
			/*color: #333333;*/
			padding: 25px 0px 25px 0px;
		}
		section.experience p {
			/*color: #333333;*/
			font-size: 16px;
			line-height: 24px;
			margin-top: 20px;
			text-align: left;
		}
		
		/***** MEDIA *****/
		section.media {
			background: none;
			background-color: #31a0d8;
			height: auto;
			padding-bottom: 40px;
		}
		section.media h2 {
			/*color: #333333;*/
			padding-top: 40px;
		}
		section.media h4,
		section.media .h4 {
			/*color: #333333;*/
			margin-bottom: 20px;
		}
		section.media p {
			/*color: #333333;*/
			margin-top: 5px;
		}

		/***** CONTACT *****/
		section.contact {
			height: auto;
			padding-bottom: 100px;
			padding-top: 40px;
		}
		section.contact h2 {
			padding: 35px 0px 0px 0px;
		}
		section.contact label {
			padding: 10px 0px 0px 0px;
		}
		section.contact p {
			text-align: left;
		}

		/***** FOOTER *****/
		footer {
			padding-top: 40px;
		}
		footer .logo-footer .footer-logo  {
			margin: 0 auto;
			padding-top: 20px;
		}
		footer a.privacy {
			padding-left: 0px;
		}
		footer a.privacy:hover {
			color: #31a0d8;
			padding-left: 0px;
		}
		footer .copyright {
			padding-bottom: 25px;
			padding-top: 10px;
			text-align: center;
		}
		footer .copyright span.mobile-copyright {
			display: block;
		}
		footer a.back-to-top {
			background: url('../images/top-back-to-top.png') no-repeat 0 0;
			background-color: #31a0d8;
			color: #ffffff;
			display: block;
			font-family: GothamBold;
			font-size: 13px;
			height: 30px;
			padding-top: 35px;
			position: absolute;
			top: -105px;
			text-align: center;
			text-transform: uppercase;
			width: 47px;
			-webkit-transition: all .2s ease-in-out;
			   -moz-transition: all .2s ease-in-out;
			     -o-transition: all .2s ease-in-out;
			        transition: all .2s ease-in-out;
		}
		footer a.back-to-top:hover {
			background-color: #31a0d8;
			height: 40px;
			top: -115px;
		}

		/***** MODAL *****/
		#modal-privacy-policy h1 {
			font-size: 48px;
			line-height: 48px;
		}
		#modal-thank-you h1 {
			font-size: 62px;
			line-height: 62px;
		}

	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		.columns input[type="text"],
        .columns input[type="password"],
        .columns input[type="email"],
        .columns textarea {
            width: 390px !important;
        }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		.columns input[type="text"],
        .columns input[type="password"],
        .columns input[type="email"],
        .columns textarea {
            width: 270px !important;
        }
	}



/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/