@font-face{font-family:Roboto;src:url(fonts/Roboto-Bold.woff2) format('woff2'),url(fonts/Roboto-Bold.woff) format('woff');font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Roboto;src:url(fonts/Roboto-Regular.woff2) format('woff2'),url(fonts/Roboto-Regular.woff) format('woff');font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:Roboto;src:url(fonts/Roboto-Medium.woff2) format('woff2'),url(fonts/Roboto-Medium.woff) format('woff');font-weight:500;font-style:normal;font-display:swap}

*{padding:0;margin:0} body,html{height:100%}

body{font-family:"Roboto", sans-serif;font-weight:400;font-size:16px;line-height:28px;color:#fff;
}

a,p,ul li,ul li a{color:#fff!important}

a{letter-spacing:1px;font-style:normal;font-size:18px;text-decoration:none;;text-decoration:underline;}
a:hover {color:#27a8e1 !important;}

h1, h6 {text-align:center;}

h1 {font-size:48px;}
h2 {font-size:40px;margin-bottom:20px;color: #27a8e1;}
h3 {font-size:36px;}
h4 {font-size:32px;}
h5 {font-size:28px;}

.logo {
    width: 100%;
    height: auto;
    max-width: 100%;
    margin:0 auto 30px auto;
    text-align:center;
}
.logo img {
    width: 100%;max-width:420px;
}
.castle-planning, .storey-urban {
    padding: 0 20px;max-width:33%;width:100%;
}
.web-address-info {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 50px 0 0 0;
    flex-wrap:wrap;
}
.video-element {
background-color: #a6a6a6;
position: relative;
height: 0;
padding-top: 100vh;
}
.video-element video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    top: 0;
    left: 0;
}
.video-element:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1;
}
.video-element .video-text {
    position: absolute;
    z-index: 9;
    bottom: 100px;
    -webkit-transition: 2s ease all;
    transition: 2s ease all;
    width: calc(100% - 24px);
}
.position-relative {
    position: relative !important;
}

@media(min-width:992px) and (max-width:1199px) {
    .castle-planning, .storey-urban {max-width:50%;}
    .video-element .video-text {bottom:20px;}
    .logo img {max-width: 350px;}
}
@media(min-width:768px) and (max-width:991px) {
    .castle-planning, .storey-urban {padding:0 10px;max-width:50%;}
    .video-element .video-text {bottom:20px;}
    .logo img {max-width: 350px;}
}
@media(max-width:767px) {
    .castle-planning, .storey-urban {padding:10px;max-width:100%;}
    .video-element .video-text {bottom:20px;}
    h1 {font-size:28px;} .web-address-info {margin-top:20px;}
    h2 {font-size:24px;margin-bottom:20px;color: #27a8e1;} h5 {font-size:18px;}
}