@import url("https://water.phila.gov/pool/drops/cold-weather-tips/fonts");@font-face{font-family:brix;src:url("https://water.phila.gov/pool/drops/cold-weather-tips/fonts/brix.otf")}
header button{position:absolute;top:0;left:0;background:whitesmoke;border:none}
*{box-sizing:border-box}
body{margin:0}
h1,h2,h3,h4,h5,p,a,ul,article,aside{font-family:brix, OpenSans, 'PT Sans', 'Trebuchet MS', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Arial Black"; max-width: 100%; }
h1{color:#00bce2;font-size:60px;line-height:60px;text-align:center;font-weight:700;margin:0 15px}
h2{color:#00aad6;font-size:300%;line-height:55px;text-align:center;margin-right:20px;margin-left:20px}
h3{color:#00aad6;font-size:225%;line-height:45px;margin-top:10px;margin-bottom:0}
h4{color:#f5f5f5;font-size:175%;line-height:45px;margin:15px 0;text-align:center}
p{color:#002f65;font-size:100%;line-height:25px;text-align:center;margin:10px 0}
span{white-space:nowrap}
li p{text-align:left}
ul{max-width:100%;list-style-type:none;padding-left:20px;margin-top:0}
ul li:before{content:'\2022 ';float:left;color:#002f65;padding-right:0.5em;margin-left:-14px}
em{font-weight:700;font-style:normal}
.content-wrap{display:flex;flex-direction:column;align-items:center}
header{background:#002f65;padding-bottom:30px;height:460px}
header .content-wrap{margin:0 5vw;margin-top:5vw}
header nav{max-width:100%;width:100%;top:0;height:85px}
header nav img{float:right;margin:10px 10px 0 0;width:80px}
header img{max-width:250px}
main .tips{background:whitesmoke;display:flex;display:-moz-flex;display:-webkit-flex;display:-ms-flex;flex-direction:column;-ms-flex-direction:column;-webkit-flex-direction:column;align-items:center;-webkit-align-items:center;padding-bottom:50px}
main .tips #safari_mobile{display:none}
main .tips #safari_mobile .tip{display:flex;display:-webkit-flex;display:-moz-flex;display:-ms-flex;justify-content:space-around;-webkit-justify-content:space-around;padding:20px;align-items:center;-webkit-align-items:center}
main .tips #safari_mobile .tip img{width:20vw;min-width:130px}
main .tips #safari_mobile .tip p{width:55%}
main .tips .mound{left:0;position:absolute;background:url("https://water.phila.gov/pool/drops/cold-weather-tips/img/wave_main-wide.svg");background-size:100% auto;width:100%;height:15vw;margin-top:-11vw;z-index:1}
main .tips #mobile p{font-size:140%}
main .tips .flex-container{display:flex;display:-webkit-flex;display:-ms-flex;display:-moz-flex;flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column;justify-content:center;-webkit-justify-content:center;align-items:center;-webkit-align-items:center}
main .tips .basement{display:none}
main .trouble{background:#002f65;padding-bottom:15px;display:flex;display:-moz-flex;display:-webkit-flex;display:-ms-flex;flex-direction:column;-ms-flex-direction:column;-webkit-flex-direction:column;align-items:center;-webkit-align-items:center}
main .trouble .mound-2{display:none;position:absolute;background:url("https://water.phila.gov/pool/drops/cold-weather-tips/img/wave_main-wide.svg");background-size:100% auto;width:101%;height:15vw;margin-top:-2vw;-webkit-transform:scaleX(-1) scaleY(-1);-moz-transform:scaleX(-1) scaleY(-1);-ms-transform:scaleX(-1) scaleY(-1);-o-transform:scaleX(-1) scaleY(-1);transform:scaleX(-1) scaleY(-1)}
main .trouble .content-wrap{align-items:flex-start;margin-top:10px}
main .trouble .warning{width:100%;position:relative;display:flex;display:-moz-flex;display:-ms-flex;display:-webkit-flex;flex-direction:row;-ms-flex-direction:row;-webkit-flex-direction:row;justify-content:space-around;-webkit-justify-content:space-around}
main .trouble .warning .content-wrap{width:70%}
main .trouble .warning img{width:30vw}
main .trouble #freezing.warning{background:whitesmoke}
main .trouble #freezing.warning img{width:15vw}
main .trouble #damage.warning{padding:0 20px;background:#bae4f2;min-height:300px}
main .trouble #damage.warning .content-wrap{width:60%}
main .trouble #damage.warning img{width:26vw}
main .trouble #repair.warning{background:whitesmoke;flex-direction:column;-ms-flex-direction:column;-webkit-flex-direction:column;padding:0 20px}
main .trouble #repair.warning h3{text-align:center}
main .trouble #repair.warning .content-wrap{width:80%;align-self:center;-webkit-align-self:center}
main .trouble #repair.warning .content-wrap #tab_title{display:none}
main .trouble #repair.warning .img-container{width:85%;align-self:center;min-height:175px;display:flex;display:-ms-flex;display:-webkit-flex;display:-moz-flex;flex-direction:row;-webkit-flex-direction:row;-ms-flex-direction:row;justify-content:space-around;-webkit-justify-content:space-around}
main .trouble #repair.warning .img-container img{width:40vw}
main .trouble #vacant.warning{background:#bae4f2;min-height:350px;flex-direction:column;-ms-flex-direction:column;-webkit-flex-direction:column;justify-content:flex-start;-webkit-justify-content:flex-start;align-items:center;-webkit-align-items:center;padding:0 10px}
main .trouble #vacant.warning .img{position:relative;background:url("https://water.phila.gov/pool/drops/cold-weather-tips/img/pre_vacant.svg");width:40%;min-width:190px;height:210px}
main .trouble #vacant.warning .img img{position:absolute;width:100%;height:100%;opacity:0;margin-left:-4px}
main .trouble #vacant.warning .content-wrap{margin-top:36px;width:auto;flex-direction:row;-webkit-flex-direction:row;-ms-flex-direction:row}
main .trouble #vacant.warning .content-wrap p{max-width:150px;align-self:center}
main .transition{background:#002f65;padding:30px}
main .transition h2{margin:0}
main .neighbor{display:flex;display:-webkit-flex;display:-moz-flex;display:-ms-flex;flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column;align-items:center;background:whitesmoke;padding:20px}
main .neighbor img{margin-top:-20px;width:80%;max-width:400px;z-index:99}
main .neighbor p{text-align:left}
main .neighbor .mound{margin-top:-16vw}
.flipper:hover .content{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}
.flipper{position:relative;width:70vw;height:70vw;max-width:350px;max-height:350px;margin:30px;-webkit-transition:transform 1s;-moz-transition:transform 1s;-ms-transition:transform 1s;-o-transition:transform 1s;transition:transform 1s;transform-style:preserve-3d}
.flipper img{max-width:350px;width:100%;margin:0}
.flipper .content{width:100%;height:100%;min-height:200px;background:whitesmoke;-webkit-transition:0.6s;transition:0.6s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;position:relative}
.flipper .content .front,.flipper .content .back{position:absolute;height:100%;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flipper .content .front{z-index:2;-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}
.flipper .content .back{border:#002f65 5px;border-radius:15px;padding:10px 10px;display:flex;display:-moz-flex;display:-ms-flex;display:-webkit-flex;flex-direction:column;-ms-flex-direction:column;-webkit-flex-direction:column;justify-content:center;-webkit-justify-content:center;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}
footer{background-color:white;display:flex;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;align-items:center;flex-direction:column;-ms-flex-direction:column;-webkit-flex-direction:column;padding:0}
footer img{width:30vw;min-width:250px;position:relative;left:0%;padding:0}
.socicons{width:60px;min-width:60px;clear:both;transition:transform .3s}
.socicons:hover{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-ms-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}
@media only screen and (min-width: 767px){p{font-size:110%}
	header h1{margin-top:50px}
	header nav img{width:115px}
	main .tips #mobile{display:none}
	main .tips .basement{position:relative;display:block;margin:0;background:url("https://water.phila.gov/pool/drops/cold-weather-tips/img/basement.svg") no-repeat;width:85%;max-width:900px;height:58vw;max-height:620px;z-index:99}
	main .tips .basement button{color:transparent;background:rgba(255,255,255,0);position:absolute;padding:0;margin:0;border:0;cursor:pointer}
	main .tips .basement button:focus-within{border:#00bce2 2px}
	main .tips .basement #leave{left:1%;top:10%;width:12%;height:15%}
	main .tips .basement #sink{left:10.767%;top:34.327%;width:9%;height:17.05%}
	main .tips .basement #pipe{left:24.5%;top:13.45%;width:4%;height:16.973%}
	main .tips .basement #window{left:47.73%;top:8.58%;width:23.615%;height:20.51%}
	main .tips .basement #temp{left:76.94%;top:25.45%;width:3.776%;height:12.8%}
	main .tips .basement #handle{left:82.07%;top:34.47%;width:15.26%;height:19.42%}
	main .tips .basement #yard{width:12vw;max-width:120px;height:12vw;max-height:120px;bottom:75px;right:125px}
	main .tips .basement #hose{position:absolute;width:21vw;max-width:200px;bottom:50px;right:50px;border-style:solid;border-color:whitesmoke;border-width:8px;transform:skewX(4deg) rotate(4deg)}
	main .tips .basement #prompt{width:0;height:75px;background:whitesmoke;display:block;position:absolute;top:15px;right:0;-webkit-transform:skewX(-4deg) rotate(-4deg);-moz-transform:skewX(-4deg) rotate(-4deg);-ms-transform:skewX(-4deg) rotate(-4deg);-o-transform:skewX(-4deg) rotate(-4deg);transform:skewX(-4deg) rotate(-4deg)}
	main .tips .basement #prompt p{width:auto;color:whitesmoke}
	main .tips .basement #viewer{background:url("https://water.phila.gov/pool/drops/cold-weather-tips/img/background.png");display:none;z-index:100;padding:20px;flex-direction:row;-ms-flex-direction:row;-webkit-flex-direction:row;justify-content:space-around;-webkit-justify-content:space-around;align-items:center;-webkit-align-items:center;width:100%;height:100%}
	main .tips .basement #viewer img{width:40%}
	main .tips .basement #viewer #x{cursor:pointer;position:absolute;top:30px;right:30px;width:40px;-webkit-transform:skewX(-4deg) rotate(-4deg);-moz-transform:skewX(-4deg) rotate(-4deg);-ms-transform:skewX(-4deg) rotate(-4deg);-o-transform:skewX(-4deg) rotate(-4deg);transform:skewX(-4deg) rotate(-4deg)}
	main .tips .basement #viewer p{text-align:left;width:30%;font-size:150%;margin:0}
	main .trouble .warning .content-wrap{margin:20px 0;align-items:center;-webkit-align-items:center;justify-content:center;-webkit-justify-content:center;width:50%}
	main .trouble #damage.warning .content-wrap{width:50%}
	main .trouble #damage.warning img{width:15vw}
	main .trouble #repair.warning{flex-direction:row;-ms-flex-direction:row;-webkit-flex-direction:row}
	main .trouble #repair.warning h3{display:none}
	main .trouble #repair.warning .content-wrap{width:50%}
	main .trouble #repair.warning .content-wrap ul{padding-right:20px}
	main .trouble #repair.warning .content-wrap #tab_title{display:block}
	main .trouble #repair.warning .img-container{width:24%;padding:20px 0;flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column}
	main .trouble #repair.warning .img-container img{width:25vw}
	main .trouble #vacant.warning{padding:20px 0}
	main .trouble #vacant.warning .content-wrap .img{width:80%;min-width:250px;height:310px}
	main .trouble #vacant.warning .content-wrap p{max-width:200px}
	main .neighbor{flex-direction:row;-webkit-flex-direction:row;-ms-flex-direction:row;justify-content:space-around;-webkit-justify-content:space-around}
	main .neighbor img{width:40%;z-index:99;margin:25px;margin-top:-10px}
	main .neighbor article{width:45%;margin:25px;margin-top:-10px}
	footer{flex-direction:row;-webkit-flex-direction:row;-ms-flex-direction:row;justify-content:space-around;-webkit-justify-content:space-around}
	@keyframes fadein{0%{opacity:0}100%{opacity:1}}
	@keyframes expand{0%{width:0}100%{width:150px}}
	@keyframes colorchange{0%{color:whitesmoke}	100%{color:#002f65}	}
}
@media only screen and (min-width: 1100px){header{height:450px}
	header .content-wrap{margin-top:10px}
	header h1{font-size:80px;margin:15px 0}
	main .neighbor{justify-content:center;-webkit-justify-content:center}
	main .neighbor img{width:35%;margin-top:-35px}
	main .neighbor article{width:35%;margin-top:-35px;z-index:99}
	main .trouble{position:relative;padding-top:135px;flex-direction:row;-ms-flex-direction:row;-webkit-flex-direction:row;flex-flow:row wrap;-webkit-flex-flow:row wrap}
	main .trouble .title{position:absolute;top:0;left:50%;margin-left:-291px}
	main .trouble #freezing.warning{background:whitesmoke}
	main .trouble #freezing.warning .content-wrap{/*width:63%;*/  max-width: 600px;  order: 2;}
	main .trouble #freezing.warning img{/*width:10vw;*/ width: 12vw; }
	main .trouble #repair.warning{/*background:#bae4f2*/}
	main .trouble #repair.warning .img-container img{width:18vw;max-width:250px}
	main .trouble #damage.warning{/*background:whitesmoke*/}
	main .trouble #vacant.warning{background:whitesmoke;justify-content:center}
	main .trouble .warning{/*width:50%;height:500px*/ justify-content: space-evenly; -webkit-justify-content: evenly;}
}