@charset "utf-8";

html {
	box-sizing: border-box;

}

*,
*::before,
*::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Arial", "Helvetica", 'Helvetica Neue', "sans-serif";
	font-weight: 400;
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header .NavSpace { /* to give space for top navbar*/
        width: 100%;
        background: #989FAC;
        min-height: 75px;
    }

























/*EXTRA LARGE MONITOR - START*/

@media screen and (min-width: 2100px){
    .HeroSettle {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 700px;
        background-image:  url("images/Settlements/OpenHand2400x933.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
    .SettlementAside {
        display: flex;
        flex-direction: row;
        align-items:center;
        align-content: center;
        margin: 50px auto;
        width: 50%;
    }
    .SettleImg {
        display: block;
        flex: 1 0 50%;
        width: 100%;
        margin: 0 auto;
        border: 2px solid #EFEFEF;
        border-radius: 15px;
    }
    .SettleImg:hover {
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 5px 5px 8px gray;
    }
    .ThumbImg {
        height: 70%;
        width: 100%;
        object-fit: cover;
        box-shadow: 2px 2px 8px gray;
    }
    .AsideText {
        display: flex;
        flex-direction: column;
        height: 275px;
        flex: 1 1 50%;
        border-left: 2px solid #DEDEE0;
        margin: 25px 0 25px 25px;
    }
    .AsideText > p {
        padding: 15px 20px;
        height: auto;
        width: 100%;
        font-size: 2.25rem;
        color: black;
    }
}   
/*EXTRA LARGE MONITOR - END */


























/*LARGE MONITOR SIZE - START*/
@media screen and (min-width: 1622px) and (max-width: 2099px){
    .HeroSettle {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 700px;
        background-image: url("images/Settlements/OpenHand2400x933.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
    .SettlementAside {
        display: flex;
        flex-direction: row;
        align-items:center;
        align-content: center;
        margin: 50px auto;
        width: 50%;
    }
    .SettleImg {
        display: block;
        flex: 1 0 50%;
        width: 100%;
        border: 2px solid #EFEFEF;
        border-radius: 15px;
    }
    .SettleImg:hover {
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 5px 5px 8px gray;
    }
    .ThumbImg {
        height: 70%;
        width: 100%;
        object-fit: cover;
        box-shadow: 5px 5px 10px gray;
    }
    .AsideText {
        display: flex;
        flex-direction: column;
        height: 275px;
        flex: 1 1 50%;
        border-left: 2px solid #DEDEE0;
        margin: 25px 0 25px 25px;
    }
    .AsideText > p {
        padding: 15px 20px;
        height: auto;
        width: 100%;
        font-size: 2rem;
        color: black;
    }
}
/*LARGE MONITOR SIZE - END*/




























/*MONITOR SIZE - START*/
@media screen and (min-width: 1281px) and (max-width: 1621px) {
    .HeroSettle {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 550px;
        background-image: url("images/Settlements/OpenHand2400x933.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
    .SettlementAside {
        display: flex;
        flex-direction: row;
        align-items:center;
        align-content: center;
        margin: 50px auto;
        width: 70%;
    }
    .SettleImg {
        display: block;
        flex: 1 0 50%;
        width: 100%;
        border: 2px solid #EFEFEF;
        border-radius: 15px;
    }
    .SettleImg:hover {
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 5px 5px 8px gray;
    }
    .ThumbImg {
        height: 70%;
        width: 100%;
        object-fit: cover;
        box-shadow: 5px 5px 10px gray;
    }
    .AsideText {
        display: flex;
        flex-direction: column;
        height: 325px;
        flex: 1 1 50%;
        border-left: 2px solid #DEDEE0;
        margin: 25px;
    }
    .AsideText > p {
        padding: 15px 20px;
        height: auto;
        width: 100%;
        font-size: 2.2rem;
        color: black;
    }
}
/*MONITOR SIZE - END*/
































/*SETTLEMENTS - START*/
@media screen and (min-width: 751px) and (max-width: 1280px){
    .HeroSettle {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 400px;
        background-image: url("images/Settlements/OpenHand2400x933.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
    .SettlementAside {
        display: flex;
        flex-direction: row;
        align-items:center;
        align-content: center;
        margin: 40px auto;
        width: 80%;
    }
    .SettleImg {
        display: block;
        flex: 1 0 50%;
        width: 100%;
        border: 2px solid #EFEFEF;
        border-radius: 15px;
    }
    .SettleImg:hover {
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 5px 5px 8px gray;
    }
    .ThumbImg {
        height: 70%;
        width: 100%;
        object-fit: cover;
        box-shadow: 5px 5px 10px gray;
    }
    .AsideText {
        display: flex;
        flex-direction: column;
        height: 250px;
        flex: 1 1 50%;
        border-left: 2px solid #DEDEE0;
        margin: 25px;
    }
    .AsideText > p {
        padding: 15px 20px;
        height: auto;
        width: 100%;
        font-size: 1.5rem;
        color: black;
    }
}
/*TABLET/DESKTOP SIZE - END*/































/*MOBILE PORTRAIT VIEW - START*/
@media screen and (max-width : 750px ){
    .HeroSettle {/*Hero Image and area*/
        display: flex;
        margin: 100px auto 0;
        width: 100%;
        min-height: 300px;
        background-image: url("images/Settlements/OpenHand800x311.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: contain;
        align-content: center;
        align-items: center;
        z-index: -1;
    }
.SettlementAside {
    display: flex;
    flex-direction: column;
    align-items:center;
    align-content: center;
    margin: 30px auto;
    width: 80%;
}
.SettleImg {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    margin: 0 auto;
    border: 2px solid #EFEFEF;
    border-radius: 15px;
}
.SettleImg:hover {
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 5px 5px 8px gray;
}
.ThumbImg {
    height: 100%;
    width: 100%;
    object-fit: cover;
    box-shadow: 5px 5px 10px gray;
    margin: 0 auto;
}
.AsideText {
    display: flex;
    flex-direction: column;
    flex: 0 1 80%;
    border-top: 2px solid #DEDEE0;
    margin: 35px 25px 0;
}
.AsideText > p {
    padding: 15px 20px;
    height: auto;
    width: 100%;
    font-size: 1.25em;
    color: black;
}
}
/*MOBILE PORTRAIT VIEW - END*/