*{}
main{width:auto;overflow-x:hidden;}
body{max-width: 100vw;overflow:scroll;height: auto;background: white;position:relative;transition:0.5s; 'Edu NSW ACT Foundation', cursive;}
.fehin{width: 50vw;height:50vw;border-radius: 50%;border:solid 5px blue;margin:1rem auto;}
.laptop nav{background-image:url(bg.jpg);color: white;width: 100vw;display:none;}
.laptop nav a{text-decoration:none;color:blue;background:white;}
.laptop nav ol{display:flex;flex-direction:row;justify-content:space-evenly;}
.laptop nav a:hover{background:orange;}
.laptop nav li{background:white;}

.about ol{list-style:none;display:flex;flex-direction:row;flex-wrap:no-wrap;align-items:center;justify-content:space-between;color: white;font-weight:500;padding: 0.5rem;}
.list{background: #09b1b7;}
.logo{width: 3rem;height: 3rem;}
.about h1{color: white;text-align:center;margin: 1rem auto;}
.about p{color: orange;text-align:center;line-height:1.5;position:relative;width: 75vw;margin: 2rem auto 1rem auto;font-size:1rem;animation:about 2s 1;}
@keyframes about{0%{top:-300px;}100%{top: 2px;}}

.about{display:flex;flex-direction:column;justify-content:center;}
.fa-bars{color: blue;position:absolute;right:10px;font-size:1.5rem;padding: 10px;}
.hire{width: 50vw;margin: 2rem auto;background: blue;color: white;border:none;border-radius: 5px;position:relative;text-decoration:none;text-align:center;font-size:1.5rem;height: 3rem;vertical-align:center;}


/*works.        works.        works.     works*/
.works{color: white;border-radius: 5px;max-width: 90vw;padding: 1rem;margin: 5px auto;position: relative;}
.works ol, .mobilenav ol{list-style:square inside url("sqpurple.gif");}
.works img{width: 40vw;height: 40vw;margin:2rem auto;box-shadow:0px 0px 20px 2px black;display:flex;justify-content:center;}
.see{color: orange;background: blue;transition:0.5s;padding: 5px;}
span{font-size:2rem;font-family:cursive;color: blue;}
span:hover{font-size:1.5rem;color: white;background: blue;}
.flyer{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;}
.strategyicon{width: 3rem;height:;color: white;margin: auto;background: white;}
.works h1{background: blue;color: white;text-align:center;width: auto;font-family:cursive, sans-serif;}
.birthday{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;}
.circle{height: 1.5rem;width: 1.5rem;border-radius: 50%;background: orange;margin: 0.5rem;}
.circle:hover, .circle:active{background: grey;}
.circles{display:flex;flex-direction:row;margin: 20rem auto 0 auto;align-self:center;justify-content:center;}

.block{display:flex}
.slidein{animation:slide 4s 1;}


.logocreation{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;}
.social{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;animation:about 2s 1;}
.greetings{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;}
.letter{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;}
.mobilenav{width: 0vw;height: 100vh;z-index:3;position:fixed;top: 0px;right: 0px;transition:width 0.5s;flex-direction:column;background: orange;color: white;}
.show{width:75vw}
.fa-linkedin,.fa-facebook,.fa-twitter,.fa-instagram, .fa-whatsapp,.fa-envelope{color: blue;font-size:0.7rem;padding: 0.2rem;}
.mobilenav a{text-decoration:none;color: white;margin: 2rem auto;}
.mobilenav li{margin: 1rem auto;}
hr{width: 50vw;text-align:center;color:white;border-radius: 2px;border:white;height: 3px;}
.fa-close{color: white;font-size:1.5rem;padding:2rem;position:relative;right:5px;}
.hid{display:none;flex-direction:column;margin: 0px 10px 0px 0px;width:50vw;justify-content:center;}
.rid{display:block;}
.slidein{animation:slide 4s 1;}
.left,.right{margin:auto;}



footer{background: blue;color: white;padding: 3px;border-radius:0px 0px 10px 10px; }
footer a{text-decoration:underline;color:white;}
.palette{width: 3rem;height:3rem;color: orange;margin:auto;}
.fa-handshake-angle{font-size:3rem;color: orange;margin:auto;}
.over{position: relative;margin:3rem auto 0px auto;color: orange;}
#circle1, #circle2, #circle3{background: orange;}


          /*         Why us!!!       */
.whyus{display:flex;flex-direction:row;justify-content:center;font-size:1rem;color: white;position:relative;}
.whyus p{text-align:center;line-height:1.5;width: 75vw;margin:auto;color: orange;font-style:italics;}
.slide{width: 100vw;display:none;justify-content:center;flex-direction:column;position:absolute;margin: auto;background: white;height: 6rem;padding: 6rem;opacity:0;}
.whyush1{color: orange;text-align:center;width: 75vw;font-family:cursive, sans-serif;border-radius: 5px;margin:10px auto;position: relative;}
h2{font-size:1rem;text-align:center;margin: 2px auto;color: orange;}
.prev{float:left;color: orange;margin: 1rem;font-size: 1.5rem;z-index:3;position:relative}
.next{float:right;color: orange;margin: 1rem;font-size: 1.5rem;z-index:3;position:relative}
@keyframes slide{0%{margin-left:-50rem}50%{margin-left:0;}100%{margin-left:50rem}}
.prev:hover{background: blue;}
.next:hover{background: blue;}
 #strategy, #problems{display:none;}
#color{display:none;}



@media(min-width:500px) and (max-width:1000px){
	:root{font-size:3rem}
	.circles{}
	.whyus h1{margin:1rem auto;}
	
	
	
	}
@media(min-width:1024px){.fehin{width:25vw;height:25vw;position:relative;margin:10px;}
.about p{width:50vw;margin:10px;}.left{width:50vw;float:left;vertical-align:center;display:flex;align-items:center;font-size:6rem;height:25vw;}.right{width:50vw;float:right;}.fa-bars{display:none;visibility:hidden;}.laptop nav{display:block;flex-wrap:wrap;}.slide{width:25vw;}.whyus{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;position:relative;}.prev,.next,.circles{}.works img{width:25vw;height:25vw;}}