@font-face {
    font-family: sansation;
    src: url('../font/Sansation_Regular.ttf');
}
*{margin:0 auto;padding:0;box-sizing:border-box;-moz-box-sizing:border-box;text-align:center;font-family: "sansation", Arial, sans-serif;font-size: 100%}
body{}
header, article, footer{width:100%;}
header{background-color:rgba(0,0,0,.9);height: 170px;text-transform: uppercase;}
header img{height:90px;margin:20px auto}
nav{width: 100%;text-transform: uppercase;background-color:rgba(167,169,172,.9);height: 50px;}
ul{list-style-type: none;}
nav ul{width:320px;}
nav ul li, nav ul li a{display: inline-block;}
nav ul li a{border-top:1px solid black;border-bottom:1px solid black;line-height: 1.2;margin:15px;font-weight: bold;}
nav ul li a:hover {color:#858585;}
#portfolio-content ul{width: 450px;}
#portfolio-content li{text-align: left}
.contact a{color: black;vertical-align: middle;margin:0px 10px;}
.contact span {vertical-align: middle;background-color: black;border-radius: 35px;width: 70px;display: inline-block;height: 70px;padding-top: 13px;}
.contact img {height:35px;margin-left: 2px;}
#about-content {background-color:white}
#portfolio-content {background-color:black;color:white;}
#contact-content {background-color:#7d7d7d;}

#portfolio-content div {display:inline-block;vertical-align: text-top;margin: 0px 40px 0px 0px;width: 300px;}
#portfolio-content div span {text-align: right;display: block; padding:10px 5px;}
#portfolio-content div:last-child {padding-left:40px;border-left: 1px solid #7d7d7d;margin: 0px;width: 360px;margin-left: -4px}
#portfolio-content div:last-child span {text-align: left}

section{padding-bottom:40px}
section p {padding:0px 30px 20px 30px;text-align:justify;max-width:550px;}
section h1{font-size:1.8em;padding-top:50px;padding-bottom: 30px}
footer{background-color:rgba(255,255,255,.8);color:#7d7d7d;font-size: .9em}
footer p{padding:10px}

.image-bg{background: white url('../images/background.jpg') no-repeat center center;background-size: cover;height: 19em;margin-top:-4px;}

h2{font-size:4em;}

.color{color:#62C3C2;}
a,a:visited{text-decoration:none;color:#292929;}
a:hover,a:active{color:#62C3C2;}
.dots:after{content:"....................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................."}
.dots{color:#62C3C2;margin-top:-14px;display:inline-block;width:100%;overflow:hidden;}


@media screen and (max-width: 420px){
.desktop{display: none}
.mobile, .profile{display: block}
.profile{margin-bottom: 10px}
.footer div{padding:0px;padding-top:10px}
}