@charset "utf-8";
/* CSS Document */



@font-face {
	font-family: "Giorgio Sans Regular";
	src: url("fonts/Giorgio/Giorgio Sans/GiorgioSans-Regular.otf") format("opentype");
}

@font-face {
	font-family: "Giorgio Sans Medium";
	src: url("fonts/Giorgio/Giorgio Sans Medium/GiorgioSans-Medium.otf") format("opentype");
}

@font-face {
	font-family: "Giorgio Sans Bold";
	src: url("fonts/Giorgio/Giorgio Sans Bold/GiorgioSans-Bold.otf") format("opentype");
}


strong{
	font-weight: normal;
	font-family: "Giorgio Sans Bold";
}



html, body{
	margin: 0;
	padding: 0;
	height: 100%;
}

body{
	font-family: "Giorgio Sans Regular", Arial, Helvetica, "sans-serif";
	font-weight:normal;
	font-style:normal;
	font-size: 28px;
	letter-spacing: 0.1em;
	background-color: #f1f1f1;
}

img{max-width: 100%;}

.brand-orange{color: #e5524a;}
.brand-pink{color: #f06eaa;}
.brand-purple{color: #855af5;}
.brand-teal{color: #1edad0;}

.nobr{white-space: nowrap;}


ul{
	margin: 0 0 0 1rem;
	padding: 0;
}
ul li{margin: 0 0 1em 0;}



body:not(#landing) > div h1 {
	text-align: center;
}
 
.site-container{
	margin: 0 auto;
	max-width: 982px;
	position: relative;
}



#header-section{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}
.menu-open #header-section{height: 100%; overflow: auto; }
#header-section > .flexbox{
	max-width: 982px;
	margin: 0 auto;	
	min-height: 80px;
}

#header-section #header-logo{
	flex: 0 0 auto;
	margin-right: 1em;
	position: relative;
	z-index: 99;
}

#header-section #header-logo a{
	display: block;
	width: 206px;
	height: 44px;
	background-image: url("../images/two-birds-nyc-logo-black.png");
}
#header-section #header-logo a:hover{background-image: url("../images/two-birds-nyc-logo-black-hover.png");}

.menu-open #header-section #header-logo a{background-image: url("../images/two-birds-nyc-logo-white.png");}
.menu-open #header-section #header-logo a:hover{background-image: url("../images/two-birds-nyc-logo-white-hover.png");}



#header-section #nav-container{
	
}

#header-section #nav-container #nav-button{
	background-image: url(../images/menu-button.png);
	background-repeat: no-repeat;
	width: 59px;
	height: 59px;
	cursor: pointer;
	position: relative;
	z-index: 100;
}
.menu-open #header-section #nav-container #nav-button{
	background-image: url(../images/menu-button-close.png);
}

#header-section #nav-container nav{display: none;}
.menu-open #header-section #nav-container nav{
	position: absolute;
	left: 0;
	top: 0;	
	display: block;
	width: 100%;
	height: 100%;

	padding: 80px 0 150px 0; height: calc(100% - 230px);	
	
}

.menu-open #header-section{
	/*background: rgba(0,0,0, 0.75);*/
	background-image: url("../images/menu-open-bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#header-section #nav-container ul{
	list-style: none;
	margin: 0 auto;
	
}

#header-section #nav-container ul li{
	font-size: 95px;
	padding: 14px;
	line-height: 1;
	margin-bottom: .5em;
}
#header-section #nav-container ul li a{
	font-family: "Giorgio Sans Bold", Arial, Helvetica, "sans-serif";
	text-decoration: none;
	font-weight: bold;
	color: #FFF;
	display: inline-block;
	min-height: 76px;
}


#aboutus #header-section #nav-container ul li:nth-child(1) a,
#header-section #nav-container ul li:nth-child(1) a:hover{
	background-image: url("../images/nav/about-us-hover.png"); 
	min-width: 328px;

	color: transparent;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: auto;
}

#services #header-section #nav-container ul li:nth-child(2) a,
#header-section #nav-container ul li:nth-child(2) a:hover{
	background-image: url("../images/nav/services-hover.png"); 
	min-width: 322px;

	color: transparent;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: auto;
}

#work #header-section #nav-container ul li:nth-child(3) a,
#header-section #nav-container ul li:nth-child(3) a:hover{
	background-image: url("../images/nav/our-work-hover.png"); 
	min-width: 347px;

	color: transparent;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: auto;
}

#contact #header-section #nav-container ul li:nth-child(4) a,
#header-section #nav-container ul li:nth-child(4) a:hover{
	background-image: url("../images/nav/contact-hover.png"); 
	min-width: 298px;

	color: transparent;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: auto;
}


main {padding-top: 80px; padding-bottom: 150px; height: calc(100% - 230px);}




#footer-section{
	background-image: url(../images/lower-waves.png);
	background-repeat: repeat-x;
	background-position: left;
	background-size: 100% 100%;
	min-height: 115px;
	
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}
#footer-section #copyright{
	font-family: Arial, Helvetica, "sans-serif";
	margin-bottom: 1.5em;
	color: #fff;
	font-size: 14px;
}





/*HOME PAGE*/
#landing{
	background-image: url(../images/home-bg.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
}
#landing .site-container, #landing #main-container{height: 100%;}

#landing #main-container #intro{
	margin-right: 2.5em;
	text-align: right;
}
#landing #main-container #intro h1{font-size: 52px; }
#landing #main-container #slogan{}


.section-header > p{text-align: center;}
.section-header > *:nth-child(2){font-weight: bold; margin: 1em auto;}


#landing .section-header > *:nth-child(2) {max-width: 560px;}
#aboutus .section-header > *:nth-child(2) {max-width: 560px;}
#services .section-header > *:nth-child(2) {max-width: 785px;}
#work .section-header > *:nth-child(2) {max-width: 785px;}
#contact .section-header > *:nth-child(2) {max-width: 560px;}



/*SERVICES*/
#services, #work{
	background-image: url(../images/other-bg.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
}



#services-work-controls	{
	max-width: 300px;
	margin: 2em auto;
}

#services-work-controls a{text-decoration: none; color: #000;}

#services-work-main-container #services-work-controls a{
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 100%;
	height: 27px;
	line-height: 24px;
}
#services-work-main-container.services-active #services-work-controls a:first-child{
	color: transparent; 
	background-image: url(../images/services-tab.png);
	width: 100px;
}
#services-work-main-container.work-active #services-work-controls a:last-child{
	color: transparent; 
	background-image: url(../images/our-work-tab.png);
	width: 100px;
}



.services-work-panel-container > .flexbox{
	max-width: 982px;
	margin: 45px auto;
}

.services-work-panel-container h2{font-family: "Giorgio Sans Bold", Arial, Helvetica, "sans-serif"; font-weight: normal; font-size: 24px;}

.services-work-panel-container > .flexbox > div{flex: 0 0 491px;}
.services-work-panel-container > .flexbox > .service-work-thumbnail{cursor: pointer;}
.services-work-panel-container > .flexbox > .service-work-description{ font-size: 18px; }
.services-work-panel-container > .flexbox > .service-work-description > div{padding: 2em 2em 2em 3em;}
.services-work-panel-container > .flexbox > .service-work-description table{
	border-spacing: 0;
	border-collapse: collapse;
}
.services-work-panel-container > .flexbox > .service-work-description table tr td:first-child{padding-right: 1em;}
.services-work-panel-container > .flexbox > .service-work-description table tr td:last-child{padding-left: 1em;}
.services-work-panel-container > .flexbox > .service-work-description table tr td[colspan="2"]{padding: 0;}



/*ABOUT*/
#aboutus{
	background-image: url(../images/other-bg.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
}
#aboutus main{text-align: center;}

#aboutus h2{font-size: 34px;}
#aboutus p {font-family: "Giorgio Sans Medium", Arial, Helvetica, "sans-serif";}

#aboutus .site-container, #aboutus #main-container{height: 100%;}



/*CONTACT*/
#contact{
	background-image: url(../images/other-bg.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
}
#contact p{font-size: 20px; text-align: center;}

#contact-form{max-width: 640px; margin: 0 auto;}

#contact-form input{
	background: none;
	border-top: none;
	border-right: none;
	border-bottom: 2px solid #cccccc;
	border-left: none;
	color: #000;
	width: 100%;
	outline: none;
}
#contact-form .flexbox{margin: 1em 0;}
#contact-form .flexbox > div{flex: 0 0 48%;}

#contact-form  #guest-name{}
#contact-form  #guest-phone{}
#contact-form  #guest-email{}
#contact-form  #guest-message{width: 100%;}
#contact-form  #submit-contact{
	border: 3px solid #474747;
	padding: .25em 1em;
	background: none;

	font-family: "Giorgio Sans Bold";
	font-size: 36px;
	color: #474747;
	width: 80%;
	max-width: 375px;
	line-height: 1;
	cursor: pointer;
}




/*THANKYOU PAGE*/
#thankyou p{font-family: "Giorgio Sans Bold"; font-size: 36px; text-align: center; margin: 2em auto;}
#thankyou p a{text-decoration: none; color: #000;}











@media screen and (max-width: 1600px){
	#header-section #nav-container ul li{font-size: 82px; margin-bottom: .25em;}
	#header-section #nav-container ul li a{min-height: 82px; background-size: contain !important; min-width: auto !important;}
}


@media screen and (max-width: 1400px){
	#header-section #nav-container ul li{font-size: 70px;}
	#header-section #nav-container ul li a{min-height: 70px;}

	#footer-section{min-height: 90px;}
	#footer-section #copyright{font-size: 12px;}
}



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

	#aboutus #main-container{overflow: scroll;}

	body{background-size: cover !important; font-size: 18px;}

	#header-section > .flexbox,
	.site-container{padding: 0 14px;}

	#header-section #nav-container ul li a{font-size: 42px; line-height: 1em; min-height: 0; background-size: contain !important;}

	#footer-section{min-height: 75px;}

	#landing #main-container #intro h1{font-size: 42px;}

	main, .menu-open #header-section #nav-container nav{padding-bottom: 75px; height: calc(100% - 155px);}
	.menu-open #header-section #nav-container ul{overflow: auto;}



	.services-work-panel-container > .flexbox > div{flex: 0 0 100%; margin: 0; padding: 0;}

	#footer-section #copyright{font-size: 12px;}


	#aboutus h2{font-size: 22px;}
}


#video-overlay{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	width: 100%;
	height: 100%;
	background-color: rgba( 0, 0, 0, 0.8);
}
.video-open #video-overlay{display: flex;}
#video-overlay #video-container{
	position: relative;
	max-width: 640px;
	max-height: 360px;
	width: 100%;
	height: 100%;
}
#video-overlay #video-container #video-close{
	position: absolute;
	top: -0.5em;
	right: -0.5em;
	z-index: 999999;
	cursor: pointer;
	max-width: 30px;
}


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

	#services-work-controls{margin: 1em auto 0em auto; font-size: 28px;}
	.services-work-panel-container > .flexbox{margin: 0 auto;}
	.services-work-panel-container > .flexbox > .service-work-description > div{padding: 1em;}

	#video-overlay #video-container{max-width: 95%; max-height: 100%; height: auto;}

	#header-section #nav-container ul li{font-size: 48px;}
	

	#landing #main-container #intro{margin-right: 0;}

	#contact-form .flexbox {flex-wrap: wrap;}
	#contact-form .flexbox > div{flex: 0 0 100%;}
	#contact-form .flexbox > div:first-child{margin-bottom: 1em;}
}