* {box-sizing:border-box; line-height:1.35em;}
a {text-decoration:none}
.LeftPopUp{display:block;position:relative;left:-9999px;height:0;max-height:0;overflow:hidden}

body {background-color:#f5f3e1;height:100vh;margin:0;padding:0;font-family: 'Raleway', sans-serif;color:#000;display:flex;flex-direction:column}

h1 {font-family: 'Simonetta', cursive;text-wrap:balance;}
h2,h3 {font-family: 'Arapey', serif;text-wrap:balance;}
h4 {font-size:20px;text-wrap:balance;}

img {border: 2px solid #fff; width:100%;box-shadow:0px 0px 20px rgba(125,125,125,0.75)}

.wrap {width:100vw}
[class|="wrap"] > div{max-width:1350px;margin:0 auto}

.wrap-logo {margin-top:5px}
.wrap-logo > div {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;}

.logo {padding:2% 0 2% 10%}
.logo h1{font-size:40px;font-weight:normal;color:#05A4E1;margin:0;text-shadow: 0px 0px 10px #bbb;}
.strapline {font-size:18px;color:#aaa;align-self: flex-end;padding:0 10% 2% 0;line-height: 173%;}


.wrap-contact-us {background-color: #90D5FF;box-shadow: 0px 1px 5px rgba(0,0,0,0.5);}
.contact-us {padding:2%;text-align:right}
.contact-us a {color:#666;text-decoration:none}
.contact-us a:hover {color:#fff;text-decoration:underline;}


section, footer {color:#02430;background-color: #90D5FF;padding-bottom:20px;/*box-shadow: 0px -1px 5px rgba(0,0,0,0.5)*/}

footer{flex-grow:1;text-align:center;align-content: flex-end;color:#555;}

.wrap-section > div {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;padding: min(50px, 2%) min(20px, 10%)}

.wrap-section > div div:first-of-type{flex-basis:350px}
.sf {flex:1 1 40%;margin:0 2%}

#s2 .wrap-section > div {flex-wrap:wrap-reverse}
#s2 article ul {padding-left:14px;text-align:left}

.wrap-nwcs {color:#000;text-align:center;font-size:20px;padding:3vh 3vw;text-wrap:balance}
.wrap-brilliant {color:#000;text-align:center;font-size:20px}
.wrap-brilliant h4 {font-size:30px; padding:max(10px, 2%);font-family: 'Simonetta', cursive;font-weight:normal;color:#05A4E1;text-shadow: 0px 0px 10px #bbb;}


@media only screen and (max-width:640px) {
	.wrap-logo > div  div {margin:0 auto;padding:2% 10%}
	.contact-us {margin:0 auto}
}

@media only screen and (max-width:420px) {
	.wrap-logo > div  div {padding:2% 0}
	.sf {margin:0 1%;text-align:center}
}

@media only screen and (min-width:1350px) {
	.logo {padding:27px 0 27px 135px}
	.contact-us {padding:27px}
}