*{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}

body {
line-height:0.9;
}

ol,ul {
list-style:none;
}

blockquote,q {
quotes:none;
}

blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none;
}

table {
border-collapse:collapse;
border-spacing:0;
}

html {
font-family:ubuntu,sans-serif;
background-color:#fff;
text-align:center;
color:#000;
height:100%;
width:100%;
overflow-y:auto;
}

body {
font-family:ubuntu,sans-serif;
background-color:#fff;
text-align:center;
color:#000;
height:auto;
width:100%;
overflow-y:hidden;
}

a,h1 {
text-align:center;
text-decoration:none;
}

b {
font-weight:700
}

#header {
position:fixed;
width:100%;
height:auto;
z-index:99;
background-color:#808069;
font-family:ubuntu,sans-serif;
color:#FFF
}

.logo_1 {
font-size:28px;
text-shadow:3px 2px 2px orange;
float:left;
padding:10px 0 0 15px;
animation-name:logo_1;
animation-duration:8s
}

@keyframes logo_1 {
from {color:#FFF;}
to {color:#17202A}
}

.logo_2 {
font-size:19px;
text-shadow:2px 2px 2px orange;
float:left;
padding:21px 0 0;
font-family:"ar cena",sans-serif;
animation-name:logo_1;
animation-duration:8s
}

@keyframes logo_1 {
from {color:#FFF}
to {color:#17202A}
}
.logo_3 {
font-size:9px;
float:left;
padding:20px 0 0 22px;
font-family:"ar cena",sans-serif;
color:#808069;
}

nav {
float:right
}

ul li {
display:inline
}

ul li a {
float:left;
padding:17px 15px 15px 0;
text-decoration:none;
text-shadow:2px 2px 2px #000;
color:orange
}

.active {
color:#FFF
}

@media(hover:hover) {
ul li a:hover {
color:#FFF
}
}

@media(hover:none) {
ul li a:hover {
color:inherit
}
}

@media screen and (max-width:800px) {
nav {
float:right;
clear:left;
width:100%
}
ul li {
display:inline
}
ul li a {
float:inherit;
padding:5px 11px;
font-size:13px
}
.logo_1 {
font-size:22px;
text-shadow:3px 2px 2px orange;
float:none;
padding:inherit
}
.logo_2 {
display:none
}
.logo_3 {
display:none
}
}

#banner {
background-image:url('AerialViewCapeTown.jpg');
background-attachment:fixed;
background-size:cover;
height:100vh;
width:100%
}

.banner_1 {
font-family:ubuntu,sans-serif;
text-shadow:-1px -1px 0 #000000,1px -1px 0 #000000,-1px 1px 0 #000000,1px 1px 0 #000;
letter-spacing:1.34vw;
font-size:7vw;
color:#FFF;
padding-top:60vh
}

.banner_2 {
font-family:"ar cena",sans-serif;
text-shadow:-1px -1px 0 #000000,1px -1px 0 #000000,-1px 1px 0 #000000,1px 1px 0 #000;
font-size:2.2vw;
color:#FFF;
padding-top:.94vw
}

#quotes {
width:100%;
height:auto;
border-top:1px solid #808069;
border-bottom:1px solid #808069
}

.quotes_1 {
font-size:26px;
font-family:"ar cena",ubuntu;
text-shadow:2px 1px 1px orange
}

@media only screen and (max-width:490px) {
.quotes_1 {
font-size:20px
}
}

.quotes_2 {
font-size:15px
}

.quotes_3 {
font-size:25px;
font-family:"ar cena",ubuntu
}

@media only screen and (max-width:650px) {
.quotes_3 {
font-size:18px
}
}

#strip {
background-image:url('chapmanspeakdrive.jpg');
background-attachment:fixed;
background-size:cover;
background-position:center center;
height:100vh;
width:100%;
}

@media only screen and (max-width:1300px) {
#strip {
display:inline
}
}

#information {
width:100%;
height:55%;
border-top:1px solid #808069;
border-bottom:1px solid #808069;
overflow:hidden;
line-height:1;
}

.weather_1 {
font-size:28px;
text-shadow:1px 1px 1px orange;
padding:.5% .5% 1%
}

.weather_2 {
float:left;
height:275px;
width:18%;
padding:.4% .2% .2%;
margin:.7% .5% 1% .8%;
border:2px solid orange;
overflow:hidden;
font-family:"ar cena",sans-serif;
background-color:#FFF;
font-size:21px
}

@media only screen and (max-width:1300px) {
#information {display:none}
}


#history {
background-image:url('capewinelands5.jpg');
background-attachment:fixed;
background-size:cover;
padding-bottom:25%;
height:auto;
width:100%;
line-height:0.9;
}

.history_1 {
font-size:27px;
font-family:ubuntu,sans-serif;
font-weight:300;
color:#000;
text-align:center;
text-shadow:1px 1px 1px orange;
padding:.5%
}

.history_2 {
font-size:20px;
font-family:"ar cena",sans-serif;
font-weight:300;
text-align:center;
text-shadow:1px 1px 1px orange;
line-height:30px;
padding:1.5% .5% 1%
}

.flex-container1 {
display:flex;
flex-wrap:wrap;
background-image:url(back_1.png);
background-attachment:fixed;
height:auto;
width:100%;
overflow:auto;
padding-top:60px;
margin:auto
}

.flex-container1>div {
width:200px;
height:201px;
margin:.8% auto;
padding:.2%;
text-align:center;
border:1px solid #000;
background:#FFF
}

.flex-container2 {
display:flex;
flex-wrap:wrap;
background-image:url(back_2.png);
background-attachment:fixed;
height:auto;
width:100%;
overflow:auto;
padding-top:60px;
margin:auto
}

.flex-container2>div {
width:200px;
height:201px;
margin:.8% auto;
padding:.2%;
text-align:center;
border:1px solid #000;
background:#FFF
}

.flex-container3 {
display:flex;
flex-wrap:wrap;
background-image:url(back_3.png);
background-attachment:fixed;
height:auto;
width:100%;
overflow:auto;
padding-top:60px;
margin:auto
}

.flex-container3>div {
width:200px;
height:201px;
margin:.8% auto;
padding:.2%;
text-align:center;
border:1px solid #000;
background:#FFF
}

.flex-container4 {
display:flex;
flex-wrap:wrap;
background-image:url(back_4.png);
background-attachment:fixed;
height:auto;
width:100%;
overflow:auto;
padding-top:60px;
margin:auto
}

.flex-container4>div {
width:200px;
height:201px;
margin:.8% auto;
padding:.2%;
text-align:center;
border:1px solid #000;
background:#FFF
}

.flex-container5 {
display:flex;
flex-wrap:wrap;
background-color:#808069;
height:7vh;
width:100%;
overflow:auto;
margin:auto;
position:absolute
}

.flex-container5>div {
width:100%;
height:auto;
margin:auto;
padding:.2%;
text-align:center;
color:orange;
text-shadow:2px 1px 1px #000;
font-family:"ar cena",sans-serif;
font-size:20px
}

.flex-container6 {
background-color:#fff;
text-align:center;
height:auto;
width:100%;
overflow:auto;
margin:auto
}

.flex-container7 {
display:flex;
flex-wrap:wrap;
background-image:url(back_1.png);
background-attachment:fixed;
height:auto;
width:100%;
overflow:auto;
padding-top:60px;
margin:auto
}

.flex-container7>div {
width:200px;
height:200px;
margin:.8% auto;
padding:.2%;
text-align:center;
border:8px outset;
background:maroon
}

.container8 {
width:180px;
height:20px;
margin:.8% auto;
padding:.2%;
text-align:center;
border:4px inset;
background:#FFF
}
.box_1 {
margin:.5%;
font-family:ubuntu,sans-serif;
font-weight:700;
font-size:18px;
text-decoration:none;
color:#000
}
@media only screen and (max-width:750px) {
.box_1 {
font-size:16px
}
}

.box_2 {
padding:.5%;
font-family:"ar cena",ubuntu;
font-size:17px;
text-decoration:none;
text-shadow:.5px .5px .5px #fff;
color:orange
}

@media only screen and (max-width:750px) {
.box_2 {
font-size:15px
}
}

.box_3 {
padding:.5%;
font-family:ubuntu,sans-serif;
font-size:12px;
line-height:15px;
text-decoration:none;
color:#000
}

.box_4 {
padding:1%;
font-family:ubuntu,sans-serif;
font-weight:700;
font-size:13px;
text-decoration:none;
color:#000
}

@media(hover:hover) {
.box_4:hover {
color:orange
}
}

@media(hover:none) {
.box_4:hover {
color:inherit
}
}

.box_5 {
padding-top:2px;
padding-right:3px;
font-family:ubuntu,sans-serif;
font-size:18px;
text-align:left;
color:orange;
text-shadow:1px 1px #B0171F
}

.box_6 {
padding-top:155px;
padding-right:3px;
font-family:"ar cena",sans-serif;
font-size:24px;
text-align:right;
line-height:21px;
color:orange;
text-shadow:1px 1px #B0171F
}

.box_7 {
height:200px;
width:200px
}

.box_8 {
padding:.5%;
font-family:"ar cena",ubuntu;
font-size:18px;
text-decoration:none;
color:maroon
}

@media only screen and (max-width:750px) {
.box_8 {
font-size:15px
}
}

.box_9 {
padding:.5%;
font-family:"ar cena",ubuntu;
font-size:18px;
text-decoration:none;
color:#8b8b00
}

@media only screen and (max-width:750px) {
.box_9 {
font-size:15px
}
}

.box_10 {
padding:.5%;
font-family:"ar cena",ubuntu;
font-size:17px;
text-decoration:none;
color:#008b00
}

@media only screen and (max-width:750px) {
.box_10 {
font-size:14px
}
}

.box_11 {
margin:1% auto;
font-family:ubuntu,sans-serif;
font-weight:700;
font-size:19px;
text-decoration:none;
color:#FFF
}

@media only screen and (max-width:750px) {
.box_11 {
font-size:17px
}
}
.box_12 {
padding:.5%;
font-family:"ar cena",ubuntu;
font-size:18px;
text-decoration:none;
color:orange
}

@media only screen and (max-width:750px) {
.box_12 {
font-size:15px
}
}

.box_13 {
padding:.5%;
font-family:"ar cena",ubuntu;
font-size:18px;
text-decoration:none;
color:red
}

@media only screen and (max-width:750px) {
.box_13 {
font-size:15px
}
}