html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

@font-face {
    font-family: raleway;
    src: url("Raleway/Raleway-Regular.ttf");
}
    
body {
    background: #ffffff;
    font-family: 'Raleway', sans-serif;
}

h1 {
    font-weight: 500;
}

h2 {
    font-weight: 400;
}

nav a:hover {
    color: darkgray;
}

banner {
    height:100vh;
    /*margin-left: 50%;
    transform: translate(-50%, 0);*/
    //background-image: url(sketch_wc5.jpg);
    background-size: cover;
    background-position: calc(100% + 0vh) center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.sector {
    //margin-top: -80px;
    width: 500px;
}

.content-titles {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.95);
    width: 100%;
}

.banner-title {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
    color: black;
    font-size: 40px;
    letter-spacing: 4px;
}

.banner-paragraph {
    max-width:800px;
    padding-top: 20px;
    padding-bottom: 20px;
    color: gray;
    font-size: 100%;
    font-weight: 400;
    letter-spacing: 1px;
}

/* Keyframes for the fade-in */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
  opacity:0;
  opacity: 1 \9; /*just in case ie*/
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

.fade-in.sector {
    -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.fade-in.banner-title {
    -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.fade-in.banner-paragraph {
    -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.fade-in.banner-button {
    -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.banner-button {
    font-family: 'Raleway', sans-serif;
    border: none;
    background-color: #51a071;
    margin-top:20px;
    margin-bottom: 20px;
    padding: 10px 20px;
    cursor: pointer;
    letter-spacing: 1px;
    
    font-size: 160%;
    font-weight: 500;
    color:white;
    list-style: none;
    text-decoration: none;
    
    //border-radius: 40px;

}

.banner-button:hover {
    background: #67bf8a;
}


#logo {
    top: 20px;
    left: 20px;;
    position: fixed;
    width: 300px;
}
    
@media only screen 
and (min-width: 768px)
and (max-width: 1025px) {
    
    #logo {
        width: 260px;
    }
    
    .sector {
        //width: 40%;
    }
    
    .banner-paragraph {
    width: 500px;
    }
}

@media only screen 
and (min-width: 200px)
and (max-width: 768px) {
    
    .banner-title {
        font-size: 190%;
        width: 400px;
    }
    
    #logo {
        width: 260px;
    }
    
    .sector {
        width: 65%;
    }
    
    .banner-paragraph {
        width: 370px;
    font-size: 100%;
    }
}