:root{
    --color-main: #212529;
    --color-sel: rgb(167, 69, 0);
    --color-hover: rgb(2, 104, 129);
}
@font-face {font-family: 'Roboto'; font-style: normal; font-weight: normal; src: local('Roboto'), url(../../css/fonts/Roboto-Regular.ttf);}
@font-face {font-family: 'Roboto'; font-style: italic; font-weight: normal; src: local('Roboto'), url(../../css/fonts/Roboto-Italic.ttf);}
@font-face {font-family: 'Roboto'; font-style: normal; font-weight: bold; src: local('Roboto'), url(../../css/fonts/Roboto-Bold.ttf);}
@font-face {font-family: 'Roboto'; font-style: italic; font-weight: bold; src: local('Roboto'), url(../../css/fonts/Roboto-BoldItalic.ttf);}
@font-face {font-family: 'Roboto'; font-style: normal; font-weight: 300; src: local('Roboto'), url(../../css/fonts/Roboto-Light.ttf);}
@font-face {
    font-family: 'dashicons';
    src:url(../../css/fonts/dashicons.ttf) format("truetype"),
    url(../../css/fonts/dashicons.woff) format("woff"),
    url(../../css/fonts/dashicons.woff2) format("woff2"),
    url(../../css/fonts/dashicons.eot) format("embedded-opentype"),
    url(../../css/fonts/dashicons.svg) format("svg");
}
*{
    margin: 0; padding: 0; box-sizing: border-box;
}
body{
    color: var(--color-main);
    font-size: 1.2em;
    text-shadow: 0 0 5px white, 0 0 10px white;
    display: flex; min-height: 100vh;
    background: linear-gradient(rgba(255, 255, 255, 0.9),rgba(255, 255, 255, 0.9)), url(/share/img/bgw.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
content{display: flex; flex-direction: column;}
button, a, [onclick], [href]{cursor: pointer;}
a{text-decoration: none; color: var(--color-hover);}
h2{font-size: 2.5em; color: var(--color-sel);}
h3{font-size: 1.5em; font-weight: 600;}
p, li{margin-top: 7px;}
li{margin-left: 30px;}

/* SWIPERS */
#main-our-projs{
    min-width: 50%;
    width: 50vw;
    max-width: 700px;
    min-height: 60vh;
    box-shadow: 0 0 20px;
    border-radius: 7px;
    background-color: rgba(230, 230, 230, 0.8);
}
#main-our-projs > *:not(button){
    min-width: 100%;
    max-width: 100%;
}
#main-our-projs h3{text-align: center;}

@media screen and (orientation: landscape) {
    content{
        width: 100%;
        margin: 0 auto;
        max-width: 1440px;
    }
    #main-our-projs img{height: 25vh; width: auto;}
}
@media screen and (orientation: portrait) {
    h2{font-size: 1.8em;}
    h3{font-size: 1.2em;}
    content{
    min-width: 100%;
        padding: 0 20px;
    }
    .dual{flex-direction: column-reverse !important;}
    #main-our-projs{
        min-width: 100%;
        max-width: 100%;
        min-height: 50vh;
        max-height: 50vh;
        margin-top: 50px;
    }
    #main-our-projs img{max-height: 25vh; max-width: 100%;}
}