/*
Theme Name: Form Follows Function
Version: 1.0
Description: Custom website for Form Follows Function
Author: Intervision Design
Author URI: http://www.intervisiondesign.com
*/










/************************************/
/************ START CSS *************/

html {height:100%;}
body {margin:0px; padding:0; line-height:1.5em; height:100%; background:#fff;}
body,td,th {color:#333; font-family: 'Lato', serif; font-weight:300; font-stretch:normal; font-size: 13px;}

/**********************************/
/************* RESET **************/

h1, h2, h3, h4, h5, h6, div, a, li, ul, fieldset, form, p, span {padding:0; margin:0; text-decoration:none; font-weight:normal; list-style:none; border:0; outline:none;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; margin: 0; padding: 0;}
img { margin: 0 0 -5px 0; padding:0; outline:none; border:0;}
h1, h2, h3, h4, h5, h6 {font-weight:300; line-height: 1em;}

input[type="button"],input[type="submit"] {-webkit-appearance: none;}
a { color:#000; outline:none; text-decoration:none; cursor:pointer;}
a:hover { color:#f60;}
.clear {clear:both;}
.hidden { overflow: hidden;}
::selection {background: #f1f1f1; color:#333;}
::-moz-selection {background: #f1f1f1; color:#333;}
/**:hover {-o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}*/

/************************************/
/*************** MAIN ***************/

#header { height: 50px; background: #fff; position: fixed; top: 0; z-index: 999; width: 100%; padding: 50px 0 0 0;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	transition: all 0.4s linear;
}
#header.scroll { padding: 0;}

#logo { background: #fff; height: 50px; width: 100%; text-align: right;}
#menu { height: 50px;}
#gap { height: 110px;}
#myslider { display: block; position: relative; padding: 50px 0 0 0;}
#slideshow { min-height: 720px; position: relative; display: block; margin: 0 5px; overflow: hidden;}
	.slide { display: block; width: 100%; min-height: 720px; overflow: hidden; float: left;}
#slidenav { position: absolute; bottom: 10px; right: 10px; z-index: 9;}
#slidenav li { float: left; padding: 0 0 0 10px;}
#slidenav li a span { display: block; width: 10px; height: 10px; background: rgba(255,255,255,0.5);}
#slidenav li a.activeSlide span { background: #fff;}

#content { display: block; position: relative; padding: 50px 0;}
#content .pages { position: relative; display: block;}
#galtitle { width: 235px; position: fixed; top: 100px; left: 50%; margin-left: -545px; background: #fff; text-align: right; display: block; padding: 18px 15px; z-index: 99; height: 14px; font-size: 14px; line-height: 1em; text-transform: uppercase;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	transition: all 0.4s linear;
}
#galtitle.scroll { top: 50px;}
#galtitle a { color: #333; font-weight: 300;}
.portfolio {}
.mymedia .text { padding: 10px 0;}
.overview { margin: 5px; position: relative; overflow: hidden;}
.overview img { width: 100%; height: auto;}
.portfolio .overview h2 { position: absolute; bottom: 50%; left: 0; background: rgba(0,0,0,0.7); color: #fff; text-align: center; padding: 20px 0; font-size: 13px; text-transform: uppercase; margin-bottom: -250px; width: 100%;}
.mediagrid .overview h2 { position: absolute; bottom: 50%; left: 0; background: rgba(0,0,0,0.7); color: #fff; text-align: center; padding: 20px 0; font-size: 13px; text-transform: uppercase; margin-bottom: -350px; width: 100%;}

#infotoggle { position: fixed; top: 100px; right: 50%; margin-right: -545px; width: 50px; height: 50px; background: #fff url(images/info.jpg); z-index: 99; cursor: pointer;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	transition: all 0.4s linear;
}
#infotoggle.scroll { top: 50px;}
#infotoggle.close {background: #fff url(images/close.jpg);}
#information { position: fixed; background: rgba(255,255,255,0.9); top: 150px; right:50%; margin-right: -545px; width: 550px; z-index: 98;
	-webkit-transition: all 0.4s linear;
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	transition: all 0.4s linear;
	opacity: 1; visibility: visible;
}
#information.hide { opacity: 0; visibility: hidden;}
#information.scroll { top: 100px;}
#information .text { padding: 20px;}

.mygallery img { margin: 5px 5px 0 5px;}

.basicpage { padding: 50px 20px 0 20px;}

.contactpage {position: absolute; right: 5px; top:50%; margin-top:-100px; background: #000; width: 50%; min-height:200px;}
.contactpage .text {padding: 20px; color: #fff;}
.contactpage .text a { color: #f60;}
.contactimg { padding: 0 5px; overflow: hidden;}
.contactimg img { width: 100%; height: auto;}

#footer { background: #000; position: fixed; width: 1090px; bottom: 0; left: 50%; margin-left: -545px; z-index: 999;}
.copyright { text-align: right; font-size: 10px; color: #999; padding: 10px;}
.copyright a { color: #999;}
.footinfo { text-align: center; text-transform: uppercase; color: #ccc; padding: 10px;}
.footinfo a { color: #ccc;}
.instagram { width: 24px; height: 24px; background: url(images/insta.png) no-repeat; display: block; margin: 10px 20px;}

/************************************/
/*************** MENU ***************/

#menu ul { float: right; padding: 10px 0 0 0;}
#menu ul li { display: block; position: relative; float: left;}
#menu ul li a {font-size: 12px; padding: 10px 0; margin:0 15px; line-height: 1em; color: #000; display: block; text-transform: uppercase; border-bottom: 1px solid #fff;}
#menu ul li a:hover { border-bottom: 1px dotted #999;}
#menu ul li.current-menu-item a, #menu ul li.current-menu-parent a {border-bottom: 1px dotted #999;}
#menu ul li.hover a {}
#menu ul li a:after { content: "/"; position: absolute; right: -2px; top: 10px;}
#menu ul li:last-child a:after {content: "";}

#menu ul ul { position:absolute; left:0; top: 35px; background:#fff; width: 120px; z-index:99999 !important; text-align: center; padding: 0;
	-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
#menu ul ul li { width: 120px;}
#menu ul ul li a { border-bottom: none; padding: 10px; margin: 0; text-align: left;}
#menu ul li.hover ul a { background: none; border-bottom: none;}
#menu ul ul li a:hover, #menu ul ul li.current-menu-item a, #menu ul ul li.current-menu-parent a { color: #fff; background: #000; border-bottom: none;}
#menu ul ul li a:after { content: "";}

/************************************/
/*************** ICONS **************/


/************************************/
/*********** TEXT STYLING ***********/

h2.title {font-size: 12px; padding: 0 0 0; text-transform: uppercase;}
.text { line-height:1.5em; display:block;}
.text span.feat { float: left; margin: 7px 20px 15px 0; width: 50px; height: 50px;}
.text p { padding:0 0 7px 0;}
.text ul, .text ol { padding:0 0 7px 0;}
.text ul li { list-style:square; list-style-position:outside; margin:0 0 0 20px;}
.text ol li { list-style:decimal; list-style-position:outside; margin:0 0 0 20px;}
.text img.responsive { width: 100%; height: auto;}
.text a {}
.text h6 { font-size:12px;}
.text h5 { font-size:14px;}
.text h4 { font-size:18px;}
.text h3 { font-size:20px;}
.text h2 { font-size:24px;}
.text h1 { font-size:30px;}
.text h1, .text h2, .text h3, .text h4, .text h5, .text h6 { padding: 15px 0;} 
input, textarea { margin:5px 0; padding:7px 5%; border:1px solid #ccc; background:#333; color:#ccc; width: 80%; font-size:14px; border: none;}
textarea { height:100px;}
input:focus, textarea:focus { background:#555;}
input[type="button"],input[type="submit"] { width:auto; border:none; background:#444; color:#fff; font-size:14px; cursor:pointer; font-weight: 300;}
input:hover[type="button"],input:hover[type="submit"] { background:#555; -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;}
.text label { font-weight: normal !important;}
.ginput_container input { margin: 0; padding-top: 7px !important; padding-bottom: 7px !important; font-size: 14px !important;}
.ginput_container .datepicker { width: 40%;}
.gform_footer br { display: none !important;}

/************************************/
/************ ALIGNMENTS ************/

.aligncenter { display: block; margin-left: auto; margin-right: auto; padding:10px 0;}
.wp-caption { border: 1px solid #f1f1f1; text-align: center; background-color:#f9f9f9; color:#999; margin-bottom: 10px;}
.wp-caption img { padding: 0; margin: 0;}
.wp-caption.alignleft { margin: 0px 10px 10px 0px; }
.wp-caption.alignright { margin: 0px 0px 10px 10px; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 1.5em; padding:10px; margin: 0; }
.alignright { float: right; margin:0 0 10px 10px;}
.alignleft { float: left; margin:0 10px 10px 0;}
img.alignleft { display:inline; float:left; margin:2px 10px 0 0 !important;}
img.alignright { display:inline; float:right; margin:2px 0 0 10px !important;}

/************************************/
/************* COMMENTS *************/

#commentformframe { display:block; border:1px solid #e5e5e5; background: #f6f6f6; padding: 20px;}
#commentformframe h3 { font-size:24px; padding:0;}
#commentformframe form { padding:15px 0px; margin: 0;}
#commentformframe span { width: 49%; float: left;}
#commentformframe span label { display: block; padding: 5px 0;}
#commentformframe input[type="text"] { width:80%;}
#commentformframe textarea { height:80px; width:90%;}
#commentformframe input[type="submit"] { float: right;}
#comments {display:block; background: #fefefe; padding: 20px 0 0 0; border: 1px solid #e5e5e5; border-top:none;}
#comments h3 { font-size:24px; padding:0 20px 20px 20px;}
#comments ol { margin:0; padding:0;}
#comments ol li { border-top:1px solid #e5e5e5; padding:20px 20px 20px 0; display: block; background: #f6f6f6;}
#comments ol li.alt { background: #fefefe;}
#comments ol li .myquote { width: 15%; height: 40px; display: block; float: left; color: #e0e0e0; font-size: 100px; line-height: 1em; font-family: Arial, serif;text-align: center;}
#comments ol li.alt .myquote { color: #f1f1f1;}
#comments ol li .commentquote { width: 85%; float: right;}
#comments ol li cite { font-size:14px; padding:10px 0; color:#999; font-family: 'Times New Roman', sans-serif; width: 85%; float: right;}
#comments ol li .nocomment { padding: 0 0 0 20px; text-align: center;}

/************************************/
/************* PAGENAVI *************/

.wp-pagenavi { font-size:13px; margin:0 auto; background:#fff; padding:10px 0 0 10px; text-align:right;}
#pagenavs span.pages, #pagenavs span.extend { cursor:text;}

/************************************/
/************* SORTING **************/

.isotope-item {z-index: 2;}
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1;}
.isotope, .isotope .isotope-item {-webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s;}
.isotope {-webkit-transition-property: height, width; -moz-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width;}
.isotope .isotope-item {-webkit-transition-property: -webkit-transform, opacity; -moz-transition-property:-moz-transform, opacity; -o-transition-property:top, left, opacity; transition-property:transform, opacity;}
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s;}

/************************************/
/********** CONTACT FORM 7 **********/

.wpcf7-form .wpcf7-validation-errors{ border:none;  background-color:#eacebd;  margin:0;  padding:7px; -webkit-border-radius:3px; -moz-border-radius:3px;  border-radius:3px}
.wpcf7-form .wpcf7-mail-sent-ok{ border:none;  background-color:#daeabd;  margin:0;  padding:7px; -webkit-border-radius:3px; -moz-border-radius:3px;  border-radius:3px}
.wpcf7-form .wpcf7-mail-sent-ng{ border:none;  background-color:#eacebd;  margin:0;  padding:7px; -webkit-border-radius:3px; -moz-border-radius:3px;  border-radius:3px}
.wpcf7-form span.wpcf7-not-valid-tip{ border:none;  background-color:#eacebd;  padding:7px; -webkit-border-radius:3px; -moz-border-radius:3px;  border-radius:3px}

/***************************/
/********** GRIDS **********/
/***************************/

.block 				{box-sizing:border-box; width:100%;}
.dropblock 			{margin:0 auto; width:1090px; position: relative; display: block;}
.center 			{margin:0 auto; width:1100px; position: relative; display: block; overflow: auto;}
.grid .block 		{float:left;}
.grid .hundred 		{width:100%;}
.grid .ninety 		{width:90%;}
.grid .eighty 		{width:80%;}
.grid .seventyfive 	{width:75%;}
.grid .seventy 		{width:70%;}
.grid .sixtysix 	{width:66.666%;}
.grid .sixty 		{width:60%;}
.grid .fifty 		{width:50%;}
.grid .forty 		{width:40%;}
.grid .thirtythree 	{width:33.333%;}
.grid .thirty 		{width:30%;}
.grid .twentyfive 	{width:25%;}
.grid .twenty 		{width:20%;}
.grid .ten 			{width:10%;}
.not-desktop 		{display:none;}
.tablet 			{display:none;}
.phone 				{display:none;}

/***************************/
/********* DESKTOP *********/
/***************************/

@media (min-width: 1101px) {
.grid .desktop-to-hundred 		{width:100%;}
.grid .desktop-to-ninety 		{width:90%;}
.grid .desktop-to-eighty 		{width:80%;}
.grid .desktop-to-seventyfive 	{width:75%;}
.grid .desktop-to-seventy 		{width:70%;}
.grid .desktop-to-sixtysix 		{width:66.666%;}
.grid .desktop-to-sixty 		{width:60%;}
.grid .desktop-to-fifty 		{width:50%;}
.grid .desktop-to-forty 		{width:40%;}
.grid .desktop-to-thirtythree 	{width:33.333%;}
.grid .desktop-to-thirty 		{width:30%;}
.grid .desktop-to-twentyfive 	{width:25%;}
.grid .desktop-to-twenty 		{width:20%;}
.grid .desktop-to-ten 			{width:10%;}
}

/***************************/
/**** TABLET TO DESKTOP ****/
/***************************/

@media (min-width: 768px) and (max-width: 1100px) {
.center, .dropblock				{margin:0;width:100%;}
.tablet 						{display:block;}
.not-desktop 					{display:none;}
.not-tablet 					{display:none;}
.grid .tablet-to-hundred 		{width:100%;}
.grid .tablet-to-ninety 		{width:90%;}
.grid .tablet-to-eighty 		{width:80%;}
.grid .tablet-to-seventyfive 	{width:75%;}
.grid .tablet-to-seventy 		{width:70%;}
.grid .tablet-to-sixtysix 		{width:66.666%;}
.grid .tablet-to-sixty 			{width:60%;}
.grid .tablet-to-fifty 			{width:50%;}
.grid .tablet-to-forty 			{width:40%;}
.grid .tablet-to-thirtythree 	{width:33.333%;}
.grid .tablet-to-thirty 		{width:30%;}
.grid .tablet-to-twentyfive 	{width:25%;}
.grid .tablet-to-twenty 		{width:20%;}
.grid .tablet-to-ten 			{width:10%;}

#galtitle { left: 0; margin-left: 0;}
#infotoggle, #information { right: 0; margin-right:0;}


#slideshow { min-height: 500px;}
.slide {min-height: 500px;}
.slide img { width: 100%; height: auto;}

.basicpage { padding: 40px;}
/*.mygallery img { width: 100%; height: auto; margin: 0;}*/
#footer { position: fixed; width: 100%; left: 0; margin-left: 0;}
}

/***************************/
/***** TABLET TO PHONE *****/
/***************************/

@media (max-width: 767px) {
.center, .dropblock				{margin:0;width:100%;}
.desktop 						{display:none;}
.not-desktop 					{display:block;}
.tablet 						{display:block;}
.not-tablet 					{display:none;}
.phone 							{display:block;}
.not-phone 						{display:none;}
.grid .phone-to-hundred 		{width:100%;}
.grid .phone-to-ninety 			{width:90%;}
.grid .phone-to-eighty 			{width:80%;}
.grid .phone-to-seventyfive 	{width:75%;}
.grid .phone-to-seventy 		{width:70%;}
.grid .phone-to-sixtysix 		{width:66.666%;}
.grid .phone-to-sixty 			{width:60%;}
.grid .phone-to-fifty 			{width:50%;}
.grid .phone-to-forty 			{width:40%;}
.grid .phone-to-thirtythree 	{width:33.333%;}
.grid .phone-to-thirty 			{width:30%;}
.grid .phone-to-twentyfive 		{width:25%;}
.grid .phone-to-twenty 			{width:20%;}
.grid .phone-to-ten 			{width:10%;}

#logo img { width: 100%; height: auto;}

#header { height: 100px;}
#galtitle { top: 150px; left: 0; margin-left: 0;}
#infotoggle { top: 150px; right: 0; margin-right:0;}
#information { top: 200px; right: 0; margin-right:0; width: 100%;}

#menu ul {float:none; text-align: center;}
#menu ul li { display: inline-table; float:none; position:relative;}
#menu ul li a {margin: 5px;}
#menu ul li a:after { content: "";}

#menu ul ul {float:none; text-align: center;}
#menu ul ul li { display: block; float:left; position:relative;}

#slideshow { min-height: 300px;}
.slide {min-height: 300px;}
.slide img { width: 100%; height: auto;}

#content { padding-top: 150px;}
.contactpage {margin-top:-100px;width: 80%;}
#galtitle.scroll, #infotoggle.scroll { top: 100px;}
#information.scroll { top: 150px;}
.basicpage { padding: 40px;}
.mygallery img { width: 100%; height: auto; margin: 0;}
#footer { position: relative; width: 100%; bottom: 0; left: 0; margin-left: 0; margin-top: 0;}
#footer .copyright { text-align: center;}

}
/***************************/

/************************************/
/************* END CSS! *************/