/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align:baseline;
	font: inherit;
}

/*html5 display rule*/
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: block;
}


#wrapper {
max-width:100%;
	position:relative;
    
}
 *,  *:after, *:before {
  box-sizing: border-box;

}
body{
    width:100%;
    height:100%;
    overflow-x:hidden;
}

.headerStyle{
background:#191722;
   
height:185px;
 margin: 0 auto;
 text-align: center;

}


 .logo {
   margin: 0 auto;
     text-align: center;
  
}



#portfoliolist .portfolio{
  padding-top: 1%;
   
}

#filters {
    padding-top:2.5%;
}

#filters li span {
	font-size:1.2em;
    color:#000034;
}

#filters li span.active {
		background: #242131;
}

section.bioSpot{
   padding-top:9%;
    max-width:100%;
  
    text-align: center;
    margin: 0 auto;
}
.image {

text-align: center;
    margin: 0 auto;
    






}

.bioText{

  display: block;
  margin:0 auto;

}

img.avatar{
    
border-radius:100%;
max-width:37%; 
   
	
   


}

h2{
font-family: 'Montserrat', sans-serif;
color: #000034;
font-weight: 500;
font-size: 2em;
    padding-top: 2%;
padding-bottom: 1%;
text-align: center;
}

p.bio{
	font-family: 'Roboto', sans-serif;
	color:#000034;
font-size: 1.2em;
overflow: hidden;
margin: 0 auto;
 text-align: justify;  
    max-width:50%;



}
 .button{
  padding-top: 3%;
  padding-bottom:10%;
}
 .button a {
  display: block;
  height: 1.875em;
  width: 12.500em;
  background: #7D7F94;
  margin:0 auto;


/*TYPE*/
  color: white;
  font: 0.938em/1.875em  'Montserrat', sans-serif;
  text-decoration: none;
  text-align: center;
    text-transform: uppercase;
  border-radius: 10px;
        box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

}
#slideit {
 font-family: 'Montserrat', sans-serif;    

}
#slideit p.info{
 font-size: .9em; 
    
    
}

p.info a {
   color:#000034; 
   
    font-family: 'Roboto', sans-serif;   
    
}
p.info a:hover {
   color:#32303b; 
   
}
    
 
footer{
    height:135px;
     background-color:#191722;
}

.copyRight{
      background:#191722;
    font-family: 'Montserrat', sans-serif;
   position: absolute;
        width: 100%;
        color: #fff;
        line-height: 40px;
        font-size: 0.8em;
        text-align: center;
        bottom:0;
   
 }

/*
Restoration twenty-twenty
------------------------------- */

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  content: " ";
  display: block;
  background: white;
  position: absolute;
  z-index: 30;
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after {
  width: 3px;
  height: 9999px;
  left: 50%;
  margin-left: -1.5px; }

.twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after {
  width: 9999px;
  height: 3px;
  top: 50%;
  margin-top: -1.5px; }

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height:100%; }

.twentytwenty-before-label, .twentytwenty-after-label, .twentytwenty-overlay {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s; }

.twentytwenty-before-label, .twentytwenty-after-label {
  -webkit-transition-property: opacity;
  transition-property: opacity; }

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  color: white;
  font-size: 13px;
  letter-spacing: 0.1em; }

.twentytwenty-before-label:before, .twentytwenty-after-label:before {
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  line-height: 38px;
  padding: 0 20px;
 border-radius: 2px; }

.twentytwenty-horizontal .twentytwenty-before-label:before, .twentytwenty-horizontal .twentytwenty-after-label:before {
  top: 50%;
  margin-top: -19px; }

.twentytwenty-vertical .twentytwenty-before-label:before, .twentytwenty-vertical .twentytwenty-after-label:before {
  left: 50%;
  margin-left: -45px;
  text-align: center;
  width: 90px; }

.twentytwenty-left-arrow, .twentytwenty-right-arrow, .twentytwenty-up-arrow, .twentytwenty-down-arrow {
  width: 0;
  height: 0;
  border: 6px inset transparent;
  position: absolute; }

.twentytwenty-left-arrow, .twentytwenty-right-arrow {
  top: 50%;
  margin-top: -6px; }

.twentytwenty-up-arrow, .twentytwenty-down-arrow {
  left: 50%;
  margin-left: -6px; }

.twentytwenty-container {
  box-sizing: content-box;
  z-index: 0;
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none; }
  .twentytwenty-container img {

    max-width: 100%;
    position: absolute;
    top: 0;
    display: block; }
  .twentytwenty-container.active .twentytwenty-overlay, .twentytwenty-container.active :hover.twentytwenty-overlay {
    background: rgba(0, 0, 0, 0); }
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active .twentytwenty-overlay .twentytwenty-after-label, .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-before-label,
    .twentytwenty-container.active :hover.twentytwenty-overlay .twentytwenty-after-label {
      opacity: 0; }
  .twentytwenty-container * {
    box-sizing: content-box; }
.twentytwenty-before-label {
  opacity: 0; }
  .twentytwenty-before-label:before {
    content: "Before"; }

.twentytwenty-after-label {
  opacity: 0; }
  .twentytwenty-after-label:before {
    content: "After"; }

.twentytwenty-horizontal .twentytwenty-before-label:before {
  left: 10px; }

.twentytwenty-horizontal .twentytwenty-after-label:before {
  right: 10px; }

.twentytwenty-vertical .twentytwenty-before-label:before {
  top: 10px; }

.twentytwenty-vertical .twentytwenty-after-label:before {
  bottom: 10px; }

.twentytwenty-overlay {
  -webkit-transition-property: background;
  transition-property: background;
  background: rgba(0, 0, 0, 0);
  z-index: 25; }
  .twentytwenty-overlay:hover {
    background: rgba(0, 0, 0, 0.5); }
    .twentytwenty-overlay:hover .twentytwenty-after-label {
      opacity: 1; }
    .twentytwenty-overlay:hover .twentytwenty-before-label {
      opacity: 1; }

.twentytwenty-before {
  z-index: 20; }

.twentytwenty-after {
  z-index: 10; }

.twentytwenty-handle {
  height: 38px;
  width: 38px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border: 3px solid white;
  border-radius: 1000px;
  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
  z-index: 40;
  cursor: pointer; }

.twentytwenty-horizontal .twentytwenty-handle:before {
  bottom: 50%;
  margin-bottom: 22px;
  box-shadow: 0 3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-horizontal .twentytwenty-handle:after {
  top: 50%;
  margin-top: 22px;
  box-shadow: 0 -3px 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-vertical .twentytwenty-handle:before {
  left: 50%;
  margin-left: 22px;
  box-shadow: 3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }
.twentytwenty-vertical .twentytwenty-handle:after {
  right: 50%;
  margin-right: 22px;
  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5);
  box-shadow: -3px 0 0 white, 0px 0px 12px rgba(51, 51, 51, 0.5); }

.twentytwenty-left-arrow {
  border-right: 6px solid white;
  left: 50%;
  margin-left: -17px; }

.twentytwenty-right-arrow {
  border-left: 6px solid white;
  right: 50%;
  margin-right: -17px; }

.twentytwenty-up-arrow {
  border-bottom: 6px solid white;
  top: 50%;
  margin-top: -17px; }

.twentytwenty-down-arrow {
  border-top: 6px solid white;
  bottom: 50%;
  margin-bottom: -17px; }

/* --------------------------

End Restoration twenty-twenty

----------------------------- */

/* ==========================================================================
   Media Queries
   ========================================================================== */
/*@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
  html {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}
*/
/* Larger than mobile */


/* #Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	section.bioSpot {
        padding-top:15%;
		max-width: 100%;
	}
    img.avatar{
        max-width:20%;
    }
    
    .button{
        padding-top:6%;
        padding-bottom:15%;
    }
    
    h2{
        padding-bottom:2%;
    }
    
    p.bio{
    font-size: 1.2em;
    overflow: hidden;
    margin: 0 auto;
    text-align: justify;
    max-width: 90%;
}
    }



/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
	
section.bioSpot {
        padding-top:20%;
		max-width: 100%;
	}
	 p.bio{     
font-size: 1em;
overflow: hidden;
margin: 0 auto;
 text-align: justify;  
    max-width:90%;
    }

    h2{
        font-size: 1.2em;
    padding-bottom: 4%;
    }
    .button{
        padding-top:6%;
        padding-bottom:20%;
    }

   .copyRight{
        font-size: .54em;
    text-align: left;
    padding-left: 4%;
    }
    
    #slideit label.open {
   
    left: 60%;
    right: 0;
   
}
    
    
    
    
}


/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container {
		width: 70%;
	}

    img.avatar{
        max-width:25%;
    }

}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}