/*CORE CONTENT*/
@import url('https://fonts.googleapis.com/css2?family=Varta:wght@300;400;500;600;700&display=swap');
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    font-size: 18px;
    font-family: 'Varta', sans-serif;
}
a {cursor: pointer;}
button {
    padding: 10px;
    padding-bottom: 6px;
    padding-top: 10px;
    letter-spacing: 1px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-family: 'Varta', sans-serif;
}
.btn {
    padding: 8px;
    padding-bottom: 6px;
    padding-top: 10px;
    letter-spacing: 1px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
}
/*COMMON ELEMENTS*/
/*Width*/
.w-10 {width: 10%;}
.w-20 {width: 20%;}
.w-30 {width: 30%;}
.w-33 {width: 33%;}
.w-40 {width: 40%;}
.w-50 {width: 50%;}
.w-60 {width: 60%;}
.w-66 {width: 66%;}
.w-70 {width: 70%;}
.w-80 {width: 80%;}
.w-90 {width: 90%;}
.w-100 {width: 100%;}
/*Flex*/
.dw-flex {display: flex;}
.dw-justify-center {justify-content: center;}
.dw-vertical-center {align-items: center;}
/*Padding & Margin*/
.p-5 {padding: 5px;}
.p-10 {padding: 10px;}
.p-15 {padding: 15px;}
.p-20 {padding: 20px;}
.m-5 {margin: 5px;}
.m-10 {margin: 10px;}
.m-15 {margin: 15px;}
.m-20 {margin: 20px;}
/*Colours*/
.c-red {color: red;}
.c-orange {color: #ec9900;}
.c-yellow {color: yellow;}
.c-green {color: green;}
.c-teal {color: teal;}
.c-cyan {color: cyan;}
.c-blue {color: blue;}
.c-purple {color: purple;}
.c-pink {color: pink;}
.c-white {color: white;}
.c-grey {color: grey;}
.c-black {color: black;}

.bc-red {background-color: red;}
.bc-orange {background-color: #ec9900;}
.bc-yellow {background-color: yellow;}
.bc-green {background-color: green;}
.bc-teal {background-color: teal;}
.bc-cyan {background-color: cyan;}
.bc-blue {background-color: blue;}
.bc-purple {background-color: purple;}
.bc-pink {background-color: pink;}
.bc-white {background-color: white;}
.bc-grey {background-color: grey;}
.bc-black {background-color: black;}
/*Links*/
.bc-teal a {color: yellow;}
.bc-teal a:hover {color: #ff9900;}
.bc-teal .btn { color: #2f2f2f;}
.bc-teal .btn:hover { color: #008080;}
/*Styling*/
.dw-center, .dw-center p {
    text-align: center;
}
/*HEADER*/
.dw-header {
    background: #000000e3;
    background-image: url('/img/transparent-square-tiles.png');
    height: 70px;
}
.dw-social {
    display: flex;
    align-self: center;
}
.dw-social a {
    text-decoration: none;
    color: white;
    margin-right: 20px;
    font-size: 20px;
}
.dw-social a i {
    margin-right: 5px;
}
/*NAVIAGATION*/
.dw-nav {
    margin-left: 50px;
    margin-right: 50px;
    display: flex;
    justify-content: space-between;
}
.dw-main-nav-ul {
    list-style: none;
    display: flex;
}
.dw-main-nav-ul li {
    padding: 4px;
    font-size: 20px;
    margin-right: 10px;
}
.dw-main-nav-ul a {
    color: white;
    text-decoration: none;
}
.dw-logo-left {
    align-self: center;
    margin-right: 10px;
}
.dw-logo-left img {
    width: 130px;
    height: auto;
}
/*Mobile Nav*/
.dw-mobile-menu-btn {
    position: relative;
    width: 100%;
    color: white;
}
.dw-mobile-menu-btn a {
    position: absolute;
    right: 5px;
    top: -20px;
}
/*MAIN PAGE CONTENT*/
.dw-main {
    background: #ffffff;
}
/*Sections*/
.dw-section {
    padding: 20px;
}
.dw-section.dw-section-header h1 {
    font-size: 30px;
}
.dw-section.dw-section-header {
    padding: 0px;
}
.dw-section-title {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
}
/*Individual section CSS*/
#web-design {
    /*background: #0080809e;*/
    /*color: white;*/
}
/*Articles*/
.dw-article {
    /*border: purple solid;*/
    max-width: 1200px;
    margin: auto;
}
/*Content Wrappers*/
.dw-section-header .dw-content-wrapper {
    text-align: center;
}
.dw-content-wrapper {
    padding: 5px;
}
.dw-content-wrapper img {
    width: 100%;
}
/*FOOTER*/
.dw-footer {
    /*background: #010159;*/
    height: 70px;
    display: flex;
    align-items: center;
    border-top: solid 1px black;
}
.dw-footer-text {
    color: white;
    margin: auto;
    text-align: center;
}
/*FORMS*/
.dw-form input, .dw-form textarea, .dw-form select {
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
}
.dw-multi-button button, .dw-multi-button a {
    margin: 8px;
}
/*CARDS*/
.card {
    background: #00000014;
    border: solid 1px;
}
/*MEDIA QUERIES*/
/*Tablet*/
@media screen and (max-width:880px) {
    .dw-nav.dw-main-nav {
        flex-direction: column;
    }
    .dw-social {
        justify-content: center;
        margin-top: 10px;
        margin-left: 30px;
        border-bottom: solid 1px white;
        padding-bottom: 2px;

    }
    .dw-social a {
        font-size: 18px;
    }
    .dw-social a:last-child {
        margin-right: 0px;
    }
    .dw-main-nav-ul {
        justify-content: center;
        margin-top: 0px;
    }
    .dw-main-nav-ul li {
        font-size: 18px;
    }
}
@media screen and (max-width:767px) {
    .tw-50 {width:50%;}
    .tw-100 {width:100%;}
}
/*Mobile*/
@media screen and (max-width:500px) {
    .m-col {flex-direction: column;}
    .m-col-rev {flex-direction: column-reverse;}
    .m-hide {display: none;}
    .m-show {display: block;}
    .m-center-text {text-align: center;}
    .mw-100 {width:100%;}
    .mw-0 {width: unset;}
    .dw-section {padding: 20px; padding-top: 10px; padding-bottom: 10px;}
    .dw-nav {
        margin-left: 15px;
        margin-right: 15px;
    }
    .dw-header {
        height: 40px;
    }
    .dw-nav {
        position: relative;
        justify-content: flex-start;
        display: block;
    }
    .dw-social {
        justify-content: flex-start;
        margin-top: 0px;
        margin-left: 10px;
        border-bottom: none;
        padding-bottom: 2px;
        padding-top: 10px;
    }
    .dw-main-nav-ul {
        padding-bottom: 20px;
        padding-top: 20px;
        position: absolute;
        background: #000000e3;
        background-image: url('/img/transparent-square-tiles.png');
        left: -20px;
        top: 40px;
        width: 100%;
    }
    .dw-social a {
        font-size: 15px;
    }
}
@media screen and (min-width:501px) {
    .m-show {display: none;}
}

/*WA API CSS*/
.wa-form {
    max-width: 500px;
    margin: auto;
    margin-bottom: 30px;
}
.wa-form input, .wa-form select, .wa-form textarea {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px;
}
.wa-form label {
    font-size: 14px;
}