/* ===========================
   ========= Body ======== 
   =========================== */

@font-face {
    font-family: 'Raleway-Thin';
    src: url('../fonts/Raleway-Thin.woff2') format('woff2'),
url('../fonts/Raleway-Thin.eot?#iefix') format('embedded-opentype'),
url('../fonts/Raleway-Thin.woff') format('woff'),
url('../fonts/Raleway-Thin.ttf') format('truetype'),
url('../fonts/Raleway-Thin.svg#Raleway-Thin') format('svg');}

@font-face {
font-family: 'Raleway-Light';
src: url('../fonts/Raleway-Light.eot');
src: url('../fonts/Raleway-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/Raleway-Light.woff') format('woff'),
url('../fonts/Raleway-Light.woff2') format('woff2'),
url('../fonts/Raleway-Light.ttf') format('truetype'),
url('../fonts/Raleway-Light.svg#svgRaleway-Light') format('svg');}

@font-face {
font-family: 'Raleway-Regular';
src: url('../fonts/Raleway-Regular.eot');
src: url('../fonts/Raleway-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/Raleway-Regular.woff') format('woff'),
url('../fonts/Raleway-Regular.woff2') format('woff2'),
url('../fonts/Raleway-Regular.ttf') format('truetype'),
url('../fonts/Raleway-Regular.svg#svgRaleway-Regular') format('svg');}

html 
{font-family: 'Raleway-Light';
color: black;
font-size: 20px;
line-height: 1.5;}

body 
{margin: 0;
padding: 0;
min-height: 100vh;}

*:focus 
{outline: none !important;}

a img 
{ /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;}

/* ===========================
   ========= Headings ======== 
   =========================== */

h1 
{font-size: 1.3em;
font-family: 'Raleway-Regular';
color: rgba(79, 110, 106, 1);}

h2 
{font-size: 1.1em;
font-family: 'Raleway-Regular';
color: rgba(79, 110, 106, 1);}

h3 
{font-size: 0.9em;
font-family: 'Raleway-Regular';
color: rgba(79, 110, 106, 1);}

/* =====================================
   ========= Links ======== 
   ===================================== */

.address a:link, .address a:visited 
{color: rgba(79, 110, 106, 1);
text-decoration: underline;}

.address a:hover, .address a:active 
{color: rgba(79, 110, 106, 0.5);
text-decoration: underline;}


/* ===========================
   ========= Image slider======== 
   =========================== */

* {-webkit-box-sizing: border-box;box-sizing: border-box;}
.mySlides {display: none;}
img {vertical-align: middle;}

.mySlides 
{margin-top: -1.5em;}

.mySlides img 
{width: 100%;
height: auto;}

/* Caption text */
.text 
{font-style: italic;
display: block;
color: #f2f2f2;
font-size: 1em;
padding: 8px 12px;
position: relative;
bottom: 3em;
width: 100%;
text-align: center;}

/* The dots/bullets/indicators */
.indicators 
{text-align:center; 
margin: -1em 0 4em 0;}

.dot 
{position: relative;
height: 15px;
width: 15px;
margin: 0 2px 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
  -webkit-transition: background-color 0.6s ease;
-o-transition: background-color 0.6s ease;
transition: background-color 0.6s ease;}

.active 
{background-color: #717171;}

.slideshow-header h1 
{display: none;}

/* Fading animation */
.fade 
{-webkit-animation-name: fade;
        animation-name: fade;
-webkit-animation-duration: 1s;
        animation-duration: 1s;}

@-webkit-keyframes fade 
{from {opacity: .4} 
  to {opacity: 1}}

@keyframes fade 
{from {opacity: .4} 
  to {opacity: 1}}

/* ===========================
   ========= Main Content ======== 
   =========================== */

.container 
{margin: 0 auto;
position: relative;
height: auto;
width: 90%;
max-width: 1350px;}

.title 
{margin: -3em auto 0 auto;
min-width: 330px;
z-index: 50;
width: 60%;
height: auto;
opacity: 0.2;
display: block;
position: relative;}

.header 
{margin-bottom: 2em;
padding-top: 30px;}

.header h2 
{font-size: 2em; 
margin-left: auto; 
width: 580px;}

.line-1
{opacity: 0.5;
font-family: 'Raleway-Thin';
border-right: 2px solid transparent;
white-space: nowrap;
overflow: hidden;}

/* Animation */
.anim-typewriter
{-webkit-animation: typewriter 4s steps(31, end), blinkTextCursor .65s step-end 8;animation: typewriter 4s steps(31, end), blinkTextCursor .65s step-end 8;}
@-webkit-keyframes typewriter
{from{width: 0;}
  to{width: 580px;}}
@keyframes typewriter
{from{width: 0;}
  to{width: 580px;}}
@-webkit-keyframes blinkTextCursor
{from{border-right-color: rgba(79, 110, 106, 1);}
  to{border-right-color: transparent;}}
@keyframes blinkTextCursor
{from{border-right-color: rgba(79, 110, 106, 1);}
  to{border-right-color: transparent;}}

.about, .recognition, .workshop
{max-width: 1200px;
width: 100%;
padding: 2em 2em;
margin: 1em auto 0 auto;
border: 2px rgba(79, 110, 106, 0.3) solid;
border-radius: 10px;}

.recognition h3 
{margin-bottom: -0.1em;}

.recognition hr
{color: rgba(0, 0, 0, 0.2);}

.education 
{padding-top: 1em;}

.contact
{padding: 1em 2em ;
margin: 2em auto 0 auto;}
 
.contact p
{text-align: center;}

.gallery {
margin-top: 4em;}

.gallery p 
{text-align: center;
font-size: 0.8em;}

.portrait 
{float: right;
max-width: 200px;
width: 40%;
min-width: 125px;
margin: 0  0 25px 25px;}

.address 
{margin: 0 auto;
height: auto;
width: 100%;
text-align: center;}

.address img 
{vertical-align: middle;
margin: 20px 10px;
height: 40px;
width: auto;}

.footer 
{margin: 3em 0 40px 0;
text-align: center; 
font-size: 0.8em;}