/*
Theme Name: GoodHealth Responsive
Theme URI: http://goodhealth.net.au/
Author: Daniel Sempertegui
Author URI: http://danielsemper.com
Description: GH Website theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Good Health

*/

/* --- RESPONSIVE MAGIC --- */

/* Locate this css after the main css */
/* Since Main Menu is so long, after 1200px it has to be streched */

@media screen and (max-width: 1200px) {

	.menu ul li a{
		font:700 11px Roboto, 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
		letter-spacing:.5px;
		padding:40px 15px 32px;
	}

		.logo img{
		margin:19px 0 0 120px;
	}

}


/* at 990px this corrects that contact us doesnt go down */

@media screen and (max-width: 990px) {

	.menu ul li a{
		font:700 11px Roboto, 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
		letter-spacing:.5px;
		padding:40px 10px 32px;
	}

	.logo img{
		margin:19px 0 0 40px;
	}


}

/* Main image of practice is 960px */


@media screen and (max-width: 940px) {

	.mainlimit{
		width:100%;
		margin:0 auto;
	}


	.mainhome img{
	width:100%;
	background:#fff;
	margin:0 auto;
	border-radius:0 0 0 0;
	}

	.boxfooter{
		width:100%;
		margin:0 auto;
		border-radius: 0 0 0 0;

	}

}


/* iPad Mini is our start point for main responsive changes 768 x 1024 so 768px (main before also was 680px) */

@media screen and (max-width: 770px) {

	.menu{
		margin:0;
		height:70px;

	}
	.menu ul{
		/* visibility:hidden; */
	}
	.logo{
		width:180px;	
	    /* margin:0 auto; */

	}

	.logo img{
		width:180px;	
	    margin:12px 0 0 20px;

	}

	.mainhome{
		margin:70px auto 20px;
		border-radius: 0 0 0 0;
	}

	.box1 {border-radius:0 0 0 0;}
	.boxgray {border-radius:0 0 0 0;}

	.boxcontent{
		box-sizing:border-box;
		width:100%;
		border-radius: 0 0 0 0;
		margin:0 auto;
		padding:30px 20px;
	}

	.boxcontent h2{

		font:bold 25px 'Open Sans', Arial, sans-serif;
		color:#222;
	}

	.footerbox ul li a{
		font:14px 'Open Sans', Arial, sans-serif;
	}

	.appointment{
		width:100%;
		margin:0 auto;
	}

	.box240{
		display:inline-block;
		width:50%;

	}

	.teambox a {
	color:#111; 
	text-decoration: none;
	font:13px "Open Sans",Helvetica,Arial,sans-serif;
	}

	.boxappoint1{
		display:block;
		width:220px;
		margin:5px auto 20px;
		padding:0;
		vertical-align: middle;
	}


	.boxappoint1 img{
		width:220px; margin: 0 auto;
	}


	#main{
		width:100%;
		margin:0;
		padding:0;
	}
	.onepage{
		width:100%;
		margin:0;
		padding:30px 25px 30px;
		font:300 15px/25px Oxygen,'Open Sans',Helvetica,Arial,sans-serif;
		color:#000;
		box-sizing: border-box;
	}

	#main .onepage h2{
		padding:40px 0 10px;
		font:bold 30px Oxygen,Helvetica,Arial,sans-serif;
		color:#204056;
	}
	
	#main .onepage h3{
		margin:15px 0 15px;
		font:bold 20px Oxygen,Helvetica,Arial,sans-serif;
		color:#204056;
	}	

	img.circle-200{width:140px; height:140px; border-radius: 70px;border:1px solid #ddd;}

	img.photo-100{width:100%;}

}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 
    /* iPhone 6 Portrait */ 

    .box240{
		display:inline-block;
		width:100%;

	}

	.box240 img{margin-top: -30px;}

	.box240 p{
		font:300 13px/18px 'Open Sans',Helvetica,Arial,sans-serif;
		color:#222;
		/* text-align:center; */
		vertical-align: middle;
		padding:20px 30px;
	}

}


/* HAMBURGER */

@media screen and (max-width: 770px) {


 .burger-button-container {  
    float:right;
    display: -webkit-box;
    display: flex;
    margin:0 20px 0 0;

  }

  .burger {

    position: absolute;
    top: 0;
    margin-top: 50px;
    left: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

ul.hhh { width: 100%; font:700 20px Roboto, 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; margin-bottom: 30px;}
ul.hhh li a { font:700 15px Roboto, 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; border:none; margin:0 auto; width:100%; padding:5px;}
ul.hhh li a:hover { border:none;}

  #burger-toggle ~ ul.hhh li {

visibility:hidden;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
font:700 16px Roboto, 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;

  }

  #burger-toggle:checked ~ ul.hhh li {
  	visibility:visible;
  	display:flex;
  	border-bottom: 0;
  	height:30px;
    -webkit-transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);

    font:700 16px Roboto, 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
text-transform:uppercase;
letter-spacing:.5px;
text-decoration:none;
color:#333;
padding:10px 25px 20px;
border-bottom:10px solid #FFF;
  }

    #burger-toggle:checked ~ ul.hhh li:hover {
  	visibility:visible;
  	display:flex;
  	border-bottom: 0;
  	height:30px;
    -webkit-transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

    #burger-toggle:checked ~ .menu{
		background-color: #400;

	}


  ul > li {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
            justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color:#222;
    background-color: #fff;
  }
  

}




/*iPad (1024 x 768)*/
@media screen and (max-width: 1024px){
  
}
/*iPad (768 x 1024)*/
@media screen and (max-width: 768px){
    
}
/*Tablet (480 x 640)*/
@media screen and (max-width: 480px){
    
}
/*iPhone(480 x 640)*/
@media screen and (max-width: 320px){
    
}
/*Smart phone */
@media screen and (max-width: 240px){
    
}




@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 
    /* iPhone 6 landscape */
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 
    /* iPhone 6+ Portrait */
}


@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 
    /* iPhone 6+ landscape */
}