body{
    height: 100%;
    margin: 0px;
    background-color: #6F483A;
    background-image: url("../images/background.PNG");
    color: rgba(0,0,0,0);
    font-size: 21px;
    font-family: Gabriola, courier new, monospace;
}
.container{
	margin-top: -40px;
	margin-bottom: -11px;
	height: 0 auto;
	max-width: 80%;
	width: auto\9; /* ie8 */}
#header{top: 0;width: 100%;position: absolute;z-index: 4;-webkit-background-clip: padding-box; /* for Safari */background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */}
.menu{display: inline-block;width: 100%;height: auto;margin: auto;box-sizing: border-box;}
/* ---------------------------------START OF DROP DOWN MENU -------------------------- */
.dropbtn{
	display: inline-block;
	width: 20%;
	height: auto;
	margin: auto;
	padding:0px 28px;
	box-sizing: border-box;
	Background-color:transparent;
	border:none;
	cursor: pointer;}
.dropdown {position: relative;display: inline-block;}
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #ffe48a;
	min-width: 160px;
	overflow: auto;
	top: 100%;
	right: 37%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;}
.dropdown-content a{color: black;padding: 12px 16px;text-decoration: none;display: block;}
.dropdown-content a:hover {background-color: #FFCF77;font-weight: bold;}
.show {display: block;}
/* END OF DROP DOWN MENU ------------------------------------ */
.title{
    margin-top: 0px;
    line-height: 1.1;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 45px;}
.follow {font-size: 40px; line-height: 0;} /*-----THE 'follow us' ON BOTTOM FOOTER---------------*/
.mainimg, .menuimg{height: auto;max-width: 100%;width: auto\9; /* ie8 */}
.mainimg2, .menuimg2, .mainimg3{display:none;height: auto;max-width: 100%;width: auto\9; /* ie8 */}
.top{text-align: left;position: sticky;position: -webkit-sticky; /* for safari */	}
.text{
    margin: 0px 0px 0px 0px;
    color: rgba(88,154,71,1.00);
    background-color: rgba(255,236,142,0.80);
    font-weight: bold;
    max-width: 0 auto;
    font-size: 28px;
    padding: 0px 80px;
    z-index: 2;
	line-height:1.5;}
.about{
    margin: -87px 130px 3px 130px;
    color: rgb(255, 255, 255);
    background-color: rgba(104,160,94,0.80);
    font-weight: bold;
    max-width: 0 auto;
    font-size: 28px;
    padding: 0px 80px;
    z-index: 1;
    line-height: 1.5;}
.contact{ /*-------THE 'follow us' FOOTER AT BOTTOM OF PAGE------------------*/
    margin: 0px 0px 0px 0px;
    padding: 20px 80px 20px 80px;
    color:rgba(67,123,71,1);
    background-color:#6f483ac7;
    font-weight: bold;
    max-width: 0 auto;
    font-size: 28px;
}
.flex-wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: space-between;
}
.contactinfo-links{display:inline-flex;padding:0px 10px 0px 2px;background-color:rgba(255,236,142,1.00);border-radius:10px;max-height:70px;min-width:208px;}
.contactinfo-links img{width:50px;}
.tos-div{text-align: left;border: 5px solid #F8ED50;background-color: #FFEC8E;margin: 0px 75px 75px 75px;}
.tos-font, .price-font{color: rgba(58,110,45,1.00);
	font-size: 18px;
	font-family: palatino, serif;
	font-weight: 400;
	margin: 0;
	padding: 0px 80px 10px 80px;
	line-height: 2;}
ul.tos-font{list-style-type:square;list-style-position: outside;}
.ignore, .index, .copyright, .com-status{
	color: #699961;
	font-size: 21px;
	font-family: Gabriola, courier new, monospace;
	font-weight: 400;
	margin: 0;
	padding: 0px 0px 0px 0px;
	}
.important{
    background-color: #F8ED50;
    border-radius: 50%;
    font-weight: bold;
    color: #FF3A7D;
    max-width: 95%;
    line-height: 1.3;}
.resume {color:#ffffff;
font-weight: bold;
text-decoration:none;
background:#7aaf6f;
font-size:40px;
width:150px;
line-height:1.5;
border-radius:10px;
text-shadow:
    /* Outline 1 */
    -1px -1px 0 #2e5829,
    1px -1px 0 #2e5829,
    -1px 1px 0 #2e5829,
    1px 1px 0 #2e5829,  
    -2px 0 0 #2e5829,
    2px 0 0 #2e5829,
    0 2px 0 #2e5829,
    0 -2px 0 #2e5829, 
    /* Outline 2 */
    -2px -2px 0 #2e5829,
    2px -2px 0 #2e5829,
    -2px 2px 0 #2e5829,
    2px 2px 0 #2e5829,  
    -3px 0 0 #2e5829,
    3px 0 0 #2e5829,
    0 3px 0 #2e5829,
    0 -3px 0 #2e5829; /* Terminate with a semi-colon */}
.resume a{color:#ffffff;text-decoration:none;}
.resume a:hover{color:#376630}
.resume a:focus{color:#376630}
.title a{color: rgb(255, 255, 255);text-decoration: none;}
.title a:hover{color: rgba(255,236,142,1.00);}
.title a:focus{color: rgba(255,236,142,1.00);}
.ignore a, .index a, .com-status a{
    color: rgb(255, 255, 255);
    text-decoration: none;
    background-color: #699961;
    border-radius: 20px;
    padding: 4px 6px 2px 6px;}
.ignore a:hover, .index a:hover, .com-status a{color: rgba(255,236,142,1.00);background-color:#567e50}
.ignore a:focus, .index a:focus, .com-status a{color: rgba(255,236,142,1.00);}
.important a{color: #FF3A7D;}
.improtant a:hover{color: #567e50}
.important a:focus{color: #FF3A7D;}
ul.ignore{list-style-type: none;}
ul.index{list-style-type: none;position:relative;margin:0px 10px;}
.social{display:inline-block;}
.img-social{width:50px;height:50px;}
.tree-social{width:95px;}
.copyright{text-align:left;line-height: 0;margin:0px 0px 20px 0px; color: #ffffff;}
.wooden{font-size: 25px; font-weight: bold; border-radius: 10%; background-color: rgba(255,123,167,0.50); color:#FFE18A; border:none; display: inline-block; vertical-align: top; line-height:0; padding:0px; margin:0px 50px; width: 250px; font-family: Gabriola, courier new, monospace;}
.wooden a{color:#FFE18A; padding: 12px 16px; text-decoration: none; display: block;}
.wooden a:hover {border-radius: 10%; background-color: rgba(255,123,167,1);font-weight: normal;}
/*-----------------Project buttons---------------*/
.proj_button{
padding:100px 0px;
text-decoration:none;
background:#495847;
color: white;
border-radius:10px;
border:5px solid rgb(255, 255, 255);
font-weight:bold;
font-size: 25px;
font-family: Gabriola, courier new, monospace;
line-height: 1;
box-shadow:-5px 10px 20px 0 rgba(0, 0, 0, 0.6);
margin:20px;
text-shadow:
    /* Outline 1 */
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,  
    -2px 0 0 #000,
    2px 0 0 #000,
    0 2px 0 #000,
    0 -2px 0 #000, 
    /* Outline 2 */
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,  
    -3px 0 0 #000,
    3px 0 0 #000,
    0 3px 0 #000,
    0 -3px 0 #000; /* Terminate with a semi-colon */
}
.projb1 a{padding:100px 45px;}
.projb2 a{padding:100px 11px;}
.projb3 a{padding:100px 51px;}
.projb4 a{padding:100px 68px;}
.projb5 a{padding:100px 36px;}
.projb6 a{padding:100px 9px;}
.projb7 a{padding:100px 48px;}
.proj_button a{
box-sizing:border-box;
float:center;
text-decoration:none;
color: white;
border-radius:10px;
font-weight:bold;
font-size: 25px;
font-family: Gabriola, courier new, monospace;
line-height: 1;
}
.proj_button:hover a{background:rgba(0, 0, 0, 0.3);}
/*----------------Contact box-------------------*/
.text_box_text{
text-decoration:none;
background:rgb(255, 255, 255);
color: rgb(0, 0, 0);
padding: 35px 20px;
border-radius:10px;
border:5px solid rgb(255, 255, 255);
font-weight:bold;
font-size: 18px;
font-family: courier new, monospace;
line-height: 1;
box-shadow:-10px 10px 10px 0 rgba(0, 0, 0, 0.6);
margin:0px 20px 60px 20px
}
.text_box{
text-decoration:none;
background:rgb(255, 255, 255);
color: rgb(0, 0, 0);
padding: 35px 20px;
border-radius:10px;
border:5px solid rgb(255, 255, 255);
font-weight:bold;
font-size: 20px;
font-family: courier new, monospace;
line-height: 1;
box-shadow:-10px 10px 10px 0 rgba(0, 0, 0, 0.6);
margin:0px 20px 60px 20px
}
/*----------PAGE TOP BUTTON START--------------*/
.pagetop {
display: none;
position: fixed;
bottom: 10px;
Right: 2px;
background-color:#ffffff00;
opacity: 100%;
border-radius: 40px;
padding: 0px 5px;
border: none;
z-index: 20;
cursor: pointer;
line-height:1;
}
.pagetop:hover {background-color:none /* Add a dark-grey background on hover */}
.pagetop-img{width:70px;}
/*----------PAGE TOP BUTTON END--------------*/
/*--- ANIMATIONS start---*/
.btnEntrance {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: btnEntrance;}
/* fadeInUp */
@keyframes btnEntrance {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.btnExit {
  animation-duration: 0.25s;
  animation-fill-mode: both;  
  animation-name: btnExit;
}
/* zoomOut */
/* @keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
} */

/* fadeOutDown */
@keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}
/*---ANIMATION end(?)--*/
.contain{
	width: 100%;
	height: 100%;
	display:flex;
	align-items: center;
	justify-content: center;
}

form{
	background-color: rgba(255,209,175,1.00);
	display: flex;
	Flex-direction: column;
	padding: 2vw 4vw;
	width: 90%;
	max-width: 600px;
	border-radius: 10px;
}

form h3{
	color: #FF7BA7;
	font-weight: 800;
	margin-bottom: 20px;
	font-family: courier new, monospace;
}


form input, form textarea{
	border: 0;
	margin: 10px 0px;
	padding: 20px;
	outline: none;
	background-color: white;
	font-size: 16px;
	font-family: courier new, monospace; 
}

form button{
	padding: 15px;
	background-color: #797979;
	color: #fff;
	font-size: 18px;
	border: 0px;
	outline: none;
	cursor: pointer;
	width: 150px;
	margin: 20px auto 0px;
	border-radius: 20px;
}
.price-sheet{border: 5px solid #F8ED50; margin: 0px 100px 250px 100px; max-width:1000px; text-align: center; padding: 10px; background-color:#FFEC8E;}

/*--------------------------------------Micro Phone View------------------------*/
@media (max-width: 192px){
.dropbtn{width:40%;height:45%;margin:0px;padding:0px;}
.menuimg, .mainimg{display:none;}
.menuimg2{display:block;min-height:150px;}
.mainimg2{display:block;min-height:185px;}
.title{font-size:20px;line-height:1.3;margin-bottom:45px;}
.contain{margin:0px !important;}
.tos-div{margin:0px 0px 45px 0px;padding:0px;}
.tos-font {font-size:15px !important;padding: 0px 0px 10px 12px !important;line-height: 1;}
.sign{margin-left:20px !important;width:100px;}
.tos-agree{padding:10px 20px 0px 20px !important;font-size:20px !important;}
.contact{padding: 5px 40px 80px 30px;}
.img-social{width:40px;height:40px;}
.tree-social{width:85px;}
.follow {font-size: 25px;}
.social {line-height:1;}
.index{font-size:18px !important;margin-right:0px !important;margin-left:0px !important;}
.copyright{font-size:18px;}
.pagetop-img{width:60px;}
.about{margin:-75px 0px 3px 0px;font-size:18px;padding:0px 10px;}
.text{font-size:18px;padding:0px 10px}
.about-us, .hello{font-size:21px !important;}
.com-status{margin-bottom: 35px; font-size: 18px;}
.important{font-size:18px;border-radius: 0%;max-width:100%;padding:0px 10px}
.contactinfo-links{display:inline-flex;padding:0px 10px 0px 2px;border-radius:10px;max-height:auto;min-width:auto;}
.contactinfo-links img{width:30px;height:30px}
.ignore{font-size:18px;line-height:1 !important}
.containing{height:400px;perspective:100em;}
.price-font{font-size:15px;padding:0px;}
.price-sheet{margin: 0px 10px 50px 10px;max-width:550px;padding: 5px;}
.cominfo{font-size: 18px;width: 100px;}
.cominfo a:hover {padding: 5px 0px;}
.cominfo2{font-size: 18px;width: 100px;}
.cominfo2 a:hover {padding: 14px 20px;}
.cominfo3{font-size: 18px;width: 100px;}
.cominfo3 a:hover {padding: 23px 17px;}
.google-formc{height:1530px;width:250px;}
.email-form{height:1530 ;width:280px;padding:20px 0px;}
}
/*--------------------------------------Phone View-----------------------------*/
@media (min-width: 193px) and (max-width: 425px){
.dropbtn{width:40%;height:45%;margin:0px;padding:0px;}
.menuimg, .mainimg{display:none;}
.menuimg2{display:block;margin-bottom:15px;}
.mainimg3{display:block;}
.title{font-size:20px;line-height:1.3;margin-bottom:45px;}
.contain{margin:0px !important;}
.tos-div{margin:0px 0px 45px 0px;}
.tos-font {font-size:15px !important;padding: 0px 5px 10px 5px !important;line-height:1.5;}
.sign{margin-left:0px !important;width:160px;}
.tos-agree{padding:10px 20px 0px 20px !important;font-size:20px !important;}
.contact{padding: 5px 40px 80px 30px;}
.img-social{width:40px;height:40px;}
.tree-social{width:85px;}
.follow {font-size: 25px;}
.social {line-height:1;}
.index{font-size:18px !important;margin-right:0px !important;margin-left:0px !important;}
.copyright{font-size:18px;}
.pagetop-img{width:60px;}
.about{margin:-75px 20px 3px 20px;font-size:18px;padding:0px 10px;}
.text{font-size:18px;padding:0px 10px}
.about-us, .hello{font-size:25px !important;}
.com-status{margin-bottom: 35px; font-size: 21px;}
.price-sheet{margin: 0px 10px 50px 10px;max-width:550px;padding: 5px;}
.com-status{margin-bottom: 35px; font-size: 21px;}
.important{font-size:18px;border-radius: 0%;max-width:100%;padding:0px 10px}
.contactinfo-links{display:inline-flex;padding:0px 10px 0px 2px;border-radius:10px;max-height:auto;min-width:auto;}
.contactinfo-links img{width:30px;height:30px}
.ignore{font-size:18px;line-height:1 !important}
.containing{height:400px;perspective:100em;margin-left:60px;}
.price-font{font-size:15px;padding:0px;}
.cominfo{font-size: 18px;width: 125px;}
.cominfo a:hover {padding: 14px 0px;}
.cominfo2{font-size: 18px;width: 125px;}
.cominfo2 a:hover {padding: 23px 16px;}
.cominfo3{font-size: 18px;width: 125px;}
.cominfo3 a:hover {padding: 23px 29px;}
.google-formc{height:1530px;width:250px;}
.email-form{height:1530 ;width:280px;padding:20px 0px;}
}
/*--------------------------------------Tablet View------------------------*/
@media (min-width: 426px) and (max-width: 750px){
.dropbtn{width: 24%;padding:0px;margin:0px;}
#mydropdown2{right: 37%;min-width:160px;}
#mydropdown1{left:37%;right:63%;min-width:160px;}
.menuimg{min-height:135px;height:auto;max-width:100%;width:auto\9; /* ie8 */}
.tos-div{margin:0px 45px 45px 45px;}
.tos-font {font-size:17px;padding: 0px 20px 10px 20px !important;line-height:1.7;}
.sign{margin-left:20px !important}
.tos-agree{padding:10px 20px 0px 20px !important;font-size:22px !important;}
.title{font-size:35px;line-height: 1.2;margin-bottom:45px;}
.follow {font-size: 35px;margin-bottom:20px;}
.contact{padding-right:30px;padding-left:30px;}
.img-social{width:40px;height:40px;}
.tree-social{width:85px;}
.index{font-size:19px !important;}
.copyright{font-size:18px;}
.about{margin:-87px 60px 3px 60px;font-size:25px;padding:0px 50px;}
.text{font-size:25px;padding:0px 50px}
.about-us, .hello{font-size:33px !important;}
.price-sheet{margin: 0px 50px 50px 50px;max-width:550px;padding: 10px;}
.com-status{margin-bottom: 35px; font-size: 21px;}
.important{font-size:20px;}
.containing{height:400px;perspective:100em;margin-left:60px;}
.price-font{font-size:15px;padding:0px;}
.cominfo{font-size: 23px;width: 180px;}
.cominfo a:hover {padding: 4px 4px;}
.cominfo2{font-size: 23px;width: 180px;}
.cominfo2 a:hover {padding: 15px 30px;}
.cominfo3{font-size: 23px;width: 180px;}
.cominfo3 a:hover {padding: 15px 48px;}
.google-formc{height:1310px;width:375px;}
.email-form{height:auto ;max-width:420px;padding:20px 0px;}
}
/*------------------------------Medium Computer View----------------------------*/
@media (min-width: 751px) and (max-width: 1000px){.dropbtn{width:23%;padding:0px 20px;margin:0;}
.menuimg{min-height:150px;height: auto;max-width: 100%;width: auto\9; /* ie8 */}
.tos-font{padding:0px 40px 10px 50px !important;}
.tos-agree{padding:10px 40px 0px 50px !important;}
.contact{padding-right:30px;padding-left:30px;}
.img-social{width:45px;height:45px;}
.tree-social{width:85px;height:35px;}
.index{margin-right:0px;padding-right:0px;}
.copyright{font-size:21px;}
.about{margin:-87px 80px 3px 80px;}
.com-status{margin-bottom: 40px; font-size: 25px;}
}
/*------------------------------Large Computer view-----------------------------*/
@media (min-width: 1250px){.dropbtn{width: 20%;padding:0px 40px;}}