/*===========================
   ========= Media Queries ======== 
   ===========================*/

@media screen and (min-width: 0px) and (max-width: 1100px) {

.header h2 
{font-size: 1.6em;
width: 440px;}

@-webkit-keyframes typewriter
{from{width: 0;}
to{width: 440px;}}

@keyframes typewriter
{from{width: 0;}
to{width: 440px;}}

.title 
{margin: -2em auto 0 auto;}
}

@media screen and (min-width: 0px) and (max-width: 950px) {

.header 
{padding-top: 0px;}

.education 
{padding-top: 0;}

.footer 
{font-size: 0.7em;}

.carousel p 
{font-size: 0.7em;}

.carousel__slide figure figcaption 
{/*background-color: rgba(0,0,0,0.2);*/
text-shadow: .1em .1em 2px #000, -.1em -.1em 2px #000;
color: white;
bottom: 0;
position: absolute;
text-align: center;
margin: 0;
-webkit-box-flex: 0;
    -ms-flex: none;
        flex: none;
width: 100%;
 padding: 5px 0;
font-size: 0.7rem;}

.indicators 
{margin: -1em 0 2em 0;}

.dot 
{height: 10px;
width: 10px;
margin: 0 2px 0 2px;}

.text 
{font-size: 0.75em;
bottom: 3em;}

.about p, .workshop p, .recognition ul li, .address, .contact form, .contact p 
{font-size: 0.8em;}

.gallery
{margin-top: 2em;}

.contact
{margin-top: -1em;}

.about, .recognition, .workshop
{padding: 0 1em;}

.footer 
{margin: 2em 0 40px 0;}
}

@media screen and (min-width: 0px) and (max-width: 800px) {

.header h2 
{font-size: 1.4em;
width: 390px;}

@-webkit-keyframes typewriter
{from{width: 0;}
to{width: 390px;}}

@keyframes typewriter
{from{width: 0;}
to{width: 390px;}}

.title 
{margin: -1em auto 0 auto;}

.carousel__thumbnails img
{width: 70px;} 
}

@media screen and (min-width: 0px) and (max-width: 750px) {

.link 
{border-radius: 0;
width: 10em;
display: block;
padding: 0;
margin: 0;}

.link:hover, .link:active 
{background-color: #ffffff;
color: #4f6e6a;}

.title 
{opacity: 0.4;}
}

@media screen and (min-width: 0px) and (max-width: 650px) {

.contact
{width: 100%;}
}

@media screen and (min-width: 0px) and (max-width: 500px) {

.portrait 
{display: block;
float: none;
margin: 0  auto 15px auto;}
}

@media screen and (min-width: 0px) and (max-width: 400px) {

.header h2 
{font-size: 1.2em;
width: 330px;}

@-webkit-keyframes typewriter
{from{width: 0;}
to{width: 330px;}}

@keyframes typewriter
{from{width: 0;}
to{width: 330px;}}
}