@font-face {
    font-family: 'Space Age';
    font-style: normal;
    font-weight: normal;
    src: local('Space Age'), url(../fonts/space_age.woff) format('woff');
}

html, body { height: 100%; }
body { margin: 0; }


ol, ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

a {
	text-decoration: none;
}

img {
	max-width: 100%;
}

body {
	font-family: 'PT Serif', serif;
	font-size: 100%;
	background: #090909;
    text-align: center;
}

body a {
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
}

.logo img {
    width: 570px;
}

.ban-head h2 {
    font-size: 2em;
    color: #fff;
    letter-spacing: 2px;
}

.ban-head h1 {
    font-size: 3.5em;
    color: #fff;
    letter-spacing: 20px;
    font-family: 'Space Age';
    font-weight: normal;
}

.ban-head p {
    font-size: 1.5em;
    color: #fff;
}

.content3 { 
	text-align: center;
    margin: 5% auto 2%;
}

.content3 p {
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 300;
}

.content3 ul li {
    display: inline-block;
}

.content3 p a {
    background: #FB5F24;
    font-size: 16px;
    padding: 12px 30px;
    display: initial;
    border-radius: 2px;
	transition:0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-ms-transition: 0.5s all;
}

.content3 p a.read {
    background:#0BC560;
    font-size: 16px;
    padding: 12px 30px;
    display: initial;
    border-radius: 2px;
    transition:0.5s all;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-ms-transition: 0.5s all;
}


.content3 p a.read:hover{
    background: #fd5c63;
}

.content3 p a{
    color: #fff;
}

.content3 p a:focus{
    outline: none;
}

/*-- /responsive design --*/

@media(max-width:1080px){
	.ban-head h1 {
        letter-spacing: 12px;
    }
}

@media(max-width:800px){
	.ban-head h1 {
        letter-spacing: 6px;
    }
}

@media(max-width:736px){
	.ban-head h1 {
    letter-spacing: 6px;
    font-size: 3.2em;
  }
	.examples {
    width: 70%;
    margin: 4em auto 0;
    }
}

@media(max-width:684px){
    .ban-head h1 {
        letter-spacing: 3px;
        font-size: 3.2em;
    }
}

@media(max-width:667px){
	.ban-head h1 {
        letter-spacing: 5px;
        font-size: 3em;
    }
}

@media(max-width:600px){
	.ban-head h1 {
        letter-spacing: 2px;
        font-size: 3em;
    }
}

@media(max-width:568px){
	.ban-head h1 {
        letter-spacing: 2px;
        font-size: 2.5em;
    }
}

@media(max-width:480px){
	.ban-head h1 {
        letter-spacing: 2px;
        font-size: 2.3em;
   }
}

@media(max-width:414px){
	.ban-head h1 {
        letter-spacing: 0px;
        font-size: 2.2em;
    }
}

@media(max-width:384px){
	.ban-head h1 {
        letter-spacing: 0px;
        font-size: 2em;
    }

    .content3 p a {
        background: #FB5F24;
        font-size: 14px;
        padding: 12px 15px;
    }
    
	.content3 p a.read {
        background: #0BC560;
        font-size: 16px;
        padding: 12px 15px;
   }

}

@media(max-width:320px){
    .ban-head {
        margin: 4em 0 0 0;
    }
}
/*-- /responsive design --*/