﻿<style type="text/css">

/* html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}
*/
body {
       margin: 0;
       padding: 0;
       background: #EEE;
       font: 10px/13px 'Lucida Sans',sans-serif;

    }
  
  html {
  overflow-y: scroll;
}
  .html {
   scrollbar-gutter: stable;
}

/* .body {
   overflow: hidden;
} */

	
	/* SKELETON IMPORT ITEMS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container,
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }


.container-portfolio {
    
  display:block;
  width: 75%;
    float: right;
    box-sizing: border-box;
  position: relative}

.container-description {
  display:block; 
  width: 25%;
    float: left;
    box-sizing: border-box;
    position: relative
}


/* For devices larger than 550px */
@media (min-width: 550px) {

  .column,
  .columns {
    margin-left: 1%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-family:helvetica;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; 
 } */


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; 
      margin: 0em;
    font-family: helvetica;
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
	width: 50%;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }

form {
	display: block;
	width:100%;
	margin:0 auto;
	position:relative; 
	text-align:center;
}
/*copied into file */
 .form{ 
    max-width: 100%; 
    min-width: 26%; 
    border-width: 0px; 
    border-color: #CCCCCC; 
    border-radius: 4px; 
    border-style: solid; 
    color: #222222; 
    font-size: 14px; 
    margin: 0px; 
    background-color: #FFFFFF; 
    padding: 31px; 
} 
.content{ 
    margin: 0px; 
} 
.form label{ 
    color: #222222; 
    font-size: 14px; 
    display: block; 
} 
.form input[type=radio], input[type=checkbox]{ 
    margin: 10px; 
    width: 13px; 
} 
.form div{ 
    display: block; 
} 
.form input, form textarea, form select{ 
    border-width: 1px; 
    border-style: solid; 
    border-color: #CCCCCC; 
    border-radius: 3px; 
    padding: 7px; 
    width: 50%; 
} 
.form,  h1, h2, p { 
    font-family: 'helvetica'; 
} 
.form h1{ 
    font-size: 3em; 
    color: #607A75; 
    padding: 0px; 
    margin: 0px; 
    margin-bottom: 10px; 
    border-bottom-style: inset; 
    border-bottom-color: #CCCCCC; 
    border-bottom-width: 2px; 
    border-radius: 0px; 
    background-color: #FFFFFF; 
} 
.intro{ 
    margin-bottom: 50px; 
} 
.clear{ 
    clear: both; 
} 
.form textarea{ 
    height: 161px; 
    width: 100%; 
} 
.form input[type=submit]{ 
    width: 25%; 
    background-color: #CCCCCC; 
    color: #222222; 
} 
.field{ 
    margin-bottom: 15px; 
} 
/*end copy */

	
/*----------END SKELETON IMPORT ------------- */
    .wrap {
       overflow: hidden;
       margin-left: 15%;
	   margin-right:15%;
    }
    .box {
       float: left;
       position: relative;
       width: 18%;
       display: block;
	
    }

    .boxInner {
       
       position: relative;
       width: auto;
       display: block;
       overflow: hidden;
	   /*border: .75px solid black; */
    }
    .boxInner img {
       width: 100%;
    }
	/* .no-touch .boxInner:hover  {
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
 	opacity: 0.8;
 	-moz-opacity: 0.8;
	outline: #F87286 solid 4px;
	z-index:1000;
	display: block;
	} */
    .boxInner .titleBox {
	font-size: .70em;
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       margin-bottom: -50px;
       background: #000;
       background: rgba(0, 0, 0, 0.5);
       color: #FFF;
       padding: 10px;
       text-align: center;
       -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
       transition: all 0.3s ease-out;
    }
   /* body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
       margin-bottom: 0;
    }*/
	
	
.about {
 font-family: helvetica;
 display:block;
} 

.about img {
  max-width: 25%;
	min-height:auto;
	position:relative;
	float:left;
	padding-right: 1em;
}

.about h1, h2, h3, p {
		padding: 1%;
		margin: 0 auto;
		display: block;
		position: relative;
}

.about p {
	font-size: 1em;
}
	
	
.footer {
		font-family: 'helvetica';
		font-size: .75em;
		position: relative;
		float: left;
		margin-top: 1%;
		height: 1%;
		clear: both;
}
	
.my-gallery {
	position: relative;
	display: block;
	width: auto;
	margin-left: 0%;
	margin-right: 0%;
	float: left;
}

.my-gallery figcaption {
	display: none;
	font-family:helvetica;
}	

figure {
	
	margin: 1% 1% 1% 1%;
}
  figure  img{
	  display: block;
	  width:100%;
	  bottom: 0em;
	  
  }	
	
	
	/*------MEDIA QUERIES ------ */
		@media only screen and ( max-width: 40em ) /* 640 - this is for iphone*/
		{
html { 
  height: 100dvh; 
  overflow: hidden; } 
  
  


    body{
    width: 100%;
    height: 100%;
       margin: 0px;
    padding: 0px;
    /* overflow: auto; */
    overscroll-behavior: contain;
    overflow:scroll;
} 

.wrap{
  position: relative;  
  top: 0;
    left: 0;
    right: 0;
    bottom:0;
    padding:0;
    margin:0;
  /* if you want the content to scroll normally: */
  overflow: hidden;
}
       .footer {
          margin: fixed;
          overscroll-behavior:contain;
          touch-action: none;
        }


p {
    padding: 1%;
    margin: 0 auto;
    display: block;
    position: relative;
    margin-top: .5em;
}

h2 {
    margin-top: 1em;
}

.about {
    margin-top:1em;
}

.about h2 {
    margin-top: 0;
}
    }





    @media only screen and (max-width : 480px) {
       /* Smartphone view: 1 tile */
	   
	   .wrap {
		   margin:5%;
	   }
	   .box {
        width: 100%;
	
		margin-top: .5em;  
		margin-left:10%;
		margin-right: 10%;
       }
       figure.box {
        width: 44%;
		padding-bottom:none;
		margin-top: 1em;  
		margin-left: 3%;
		margin-right: 3%;
       }
	   
	   input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
		   width:100%;
		   
    }
	.form input, form textarea, form select {
		width:100%;
	}
	
	.about img {
		float: none;
		max-width:100%;
		position:relative;
		width:auto;
		
	}
	.boxInner .titleBox {
		display: none;
	}
	

	.my-gallery figcaption {
	display: none;
}	

.container.my-gallery {
	position: absolute;
	display: block;
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
}

figure {
	padding: none;
	margin-right: 10%;
	margin-left: 10%;
	display: block;
	  width:auto;
  }
	
	
figure.boxInner img {
	width: 100%;
}

	.container-portfolio {
    
  display:block;
  width: 100%;
    float: right;
    box-sizing: border-box;
  position: relative}

.container-description {
  display:block; 
  width: 100%;
    float: left;
    box-sizing: border-box;
    position: relative
}


	
    @media only screen and ( max-width: 650px ) and ( min-width: 481px ) { 
	 /* iPad view - tiles grid */
	 .box {
			float: left;
			position: relative;
			display: block;
			width: 18%;
		}
    
  /*
.container {
  width: 100%;
  float: left;
  box-sizing: border-box; 
  z-index:1000;
}
*/

	 figure.box {
		width: auto;
	
	 }
	   .wrap {
	   display:block;
	   margin:5%;}
	   
	   .boxInner .titleBox {
		display: none;
	}
	.container-portfolio {
    
  display:block;
  width: 100%;
    float: right;
    box-sizing: border-box;
  position: relative}

.container-description {
  display:block; 
  width: 100%;
    float: left;
    box-sizing: border-box;
    position: relative
}
  
    }
	
	@media only screen and (min-width: 375px) and ( max-width: 667px ) {
		.wrap {
		margin-left: 5%;
		margin-right: 5%;
		}
		
	
	
  
    }
	
	@media only screen and (min-width:789px) and (max-width: 1074px) {
		
		.box {
			float: left;
			position: relative;
			display: block;
			width: 18%;
		}
	}
	
	@media only screen and (max-width: 1366px ) {
	
		.wrap {
		margin-left: 5%;
		margin-right: 5%;
		display:block;}
		
	
	}
    @media only screen and (max-width : 1366px) and (min-width : 1051px) {
       /* Medium desktop: 4 tiles */
       figure.box {
          width: 18%;
		
               }
	   
	   
    }
  </style> 