@import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,600,600italic");

@import url('https: //fonts.googleapis.com/css2?family=Fugaz+One&family=Nunito&display=swap');

/* Reset some default styles */
body {
    margin: 0;
    padding-left: 10%;
    padding-right: 10%;
    box-sizing:border-box;
    background-image:radial-gradient(green, green, gray,gray);
    font-size: 1.5rem;
    font-family:"Roboto",sans-serif;
}
  * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
} 
:root {
	--HEADER-BGCOLOR: #333;
	--HEADER-COLOR: whitesmoke;
} 

html {
	scroll-behavior:smooth;
	font-family: 'Nunito', sans-serf;
}


.main {
	background-color: rgb(86, 133, 86);
	color: var(--HEADER-COLOR);
}
.header-title-line {
	background-color: rgb(86, 133, 86) ;
	padding: 0.10rem 0.50rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content:space-between;  
}
.menu-button {
	background-color: transparent;
	border: none;
	width: 48px;
	height: 48px; 
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
.menu-icon,
.menu-icon::before,
.menu-icon::after {
    background-color: var(--HEADER-COLOR);
    width:40px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    transition: all 0.5s;
} 
.menu-icon,
.menu-icon::before,
.menu-icon::after {
    content: "";
}
.menu-icon {
	transform: translate(-20px, -12px);
}
.menu-icon::before {
	transform: translate(-20px, 12px);
}
.menu-icon::after {
	transform: translate(-20px, 12px);
}
:is(main:hover, main:focus-within) .menu-icon {
	background-color: white;
	transform: rotate(360deg);
}
:is(main:hover, main:focus-within) .menu-icon::before {
	transform: translateX(-20px) rotate(45deg);         
}
:is(main:hover, main:focus-within) 
.menu-icon::after{
 transform: translateX(-20px) rotate(-45deg);         
}
:is(main:hover, main:focus-within) nav {
	display: block;
}
.nav {
	background-color: var(--HEADER-BGCOLOR); 
	display: none;
	transform-origin: top center;
	animation: showMenu 0.5s ease-in-out forwards;
}
@keyframes showMenu {
	0% {
					transform: scaleY(0);
	}
	80% {
					transform: scaleY(1.5);
	}
	100% {
					transform:scaleY(1) ;
	}
}
.ul {
    list-style-type: none;
    display:flex ;
    flex-flow: column nowrap;
}
.nav li {
	padding: 0.5rem;
  border-bottom: 1px solid orange;  
}
.nav a {
    display: block;
    text-align: center;
    width: 80%;
    margin: auto;
}
.nav a:any-link {
 /* color: var(--HEADER-COLOR); */
	font-weight: bold;
	text-decoration: none;
}
.nav a:hover,
.nav a:focus {
    transform: scale(1.2);
    transition:all 0.3s;
} 



 /* Image */
		
	img {
		display: block;
		margin: auto;
		padding-left: 1.25rem;
		padding-right: 1.25rem; 
		}

 .offscreen {
    color:aqua;
    text-align:center;
    font-family: 'Nunito', sans-serf;;
} 

  h1 {
    text-align: center;
    color:blanchedalmond;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image:-webkit-repeating-linear-gradient( skyblue, brown); 
    max-width: 50vw;
    min-height:3rem;
    margin-left:20%;
    margin-right: 20%;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
    border-radius: 10px;
}

h2 {
	text-align: right;
	color: bisque;
}


h3 {
    text-align: center;
	color:bisque ;
}

h4 {
	color: bisque;
    text-align: center; 
}


  a {
  color: #37c0fb;
  font-weight: 300;
  text-decoration: none;
  border-bottom: 1px dotted;
 } 


 a:hover {
 color: orange;
 border-bottom-color: transparent;
} 

.responsive {
	display: block;
	margin: auto;
	width: 100%;
	height:530px;
}

    section {
	  width: 100%;
	  height: auto;
    }  

 .sticky {
    background-color:none;
    position:fixed ; 
    top: 2vh;
    }  
    
.quote {
    font-size: 2rem;
    color: lime;
}

    .nowrap {
    white-space: nowrap;
} 


   p {
    text-align: justify;
    margin-left: 0;
    margin-right: 0;
    color:whitesmoke;
    justify-items: center;
	font-size: 2.5vh;
	font-weight:lighter lighter;
	text-align-last: right;			
}  

 
 		/* Nav */
  .header__nav {
	margin-top: 3vh;
	position: sticky;
    height: 3.5rem;
    background-image:-webkit-radial-gradient(orange,blanchedalmond, skyblue, orange);
    justify-content: center;
    font-weight: bold;
	font: 1.6rem sans-serif;
	font-weight: bolder;
    box-shadow: 0 6px 5px -5px #333;
	cursor: default;
  }


 .header__ul {
    padding: 7px;
    display: block;
	margin: auto;
    justify-content:space-evenly;
    gap: 1rem;
		 
 } 

		 .header__nav:after {
			content: '';
			display: block;
			width: 100%;
			height: 0.75em;
			background-color: #37c0fb;
		} 

		  .header__nav > ul {
			margin: 0.1rem;
		} 

			 .header__nav > ul > li {
				position: relative;
				display: inline-block;
				margin-left: 1rem;
			} 
			

			 .header__nav > ul > li  a {
					color:blue; 
					text-decoration: none;
					border: 0;
					display: flex;
					padding-left: 0.8rem;
				}   

				.header__nav > ul > li:first-child {
					margin-left: 0;
				
				}

                .header__nav a:hover {
					 background-color: rgb(205, 159, 159);
					 display: block;
					 padding-right: 20px; 
					 border-radius: 5px; 
					 font-family:cursive;
					 color: white;
				}


				.header__nav > ul > li.current {
					font-weight: 300;
				} 

				.header__nav > ul > li.current:before {
						-moz-transform: rotateZ(45deg);
						-webkit-transform: rotateZ(45deg);
						-ms-transform: rotateZ(45deg);
						transform: rotateZ(45deg);
						width: 0.75em;
						height: 0.75em;
						content: '';
						display: block;
						position: absolute;
						bottom: -0.90em;
						left: 50%;
						margin-left: -0.375em;
						background-color: #37c0fb;
					} 


				  .header__nav > ul > li.current a {
						color: #fff;
					} 


					  .header__nav > ul > li.active a {
					    color: lime;
				    } 

					
			        .header__nav > ul > li.active.current:before {
					opacity: 0;
				    }  


				.header__nav > ul > li > ul {
					display: none ;
				}  


			/* .menu {
		          background-color: #333;
		          border-radius: 5px;
		          color: #fff;
		          min-width: 10em;
		          padding: 1em 0;
		          text-align: center;
		          box-shadow: 0 1em 1em 0 rgba(0, 0, 0, 0.5);
		          list-style: none;
	            }    */
				
				

    /* Dropdown */

		.dropdown {
			width: 135px;
			line-height: 2.5rem;
			padding-left: 0 1.1rem 0 1rem; 
			position: relative;
            display: inline-block;
		} 

	    .dropdown > ul > li > a {
			    width: 10rem;
				background-color: #37c0fb;
				justify-content: left;
				}
		
	 .dropdown .dropdown-content {
			position: absolute;
		}

	 .dropdown-content > li > a {
				display:none;
				list-style: none ;
				text-decoration:none;
				border: 0;
				border-radius: 5px;
				padding-left: 3px;
			    justify-content: center;
			}  

		.dropdown  ul {
				background-color: rgb(242, 168, 168); 
				list-style-type: none;
			
			}

		.dropdown:hover .dropdown-content {
			display: block;
            position: absolute;
            min-width: 100px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding: 12px 16px;
            z-index: 1;
           }  
  
        .dropdown a:hover {
	         background-color: #555555;
	         color: lime;

          }   

		.dropdown.level-0 {
			border-radius: 0 0 5px 5px;
			font-size: 0.9em;
			padding-top: 0;
			margin-top: -1px;
		} 
		
        /* || HERO */
        .hero {
            position: relative; 
        } 


 .hero__h1 {
    background-image:-webkit-repeating-linear-gradient( lime, orange,green,green,green, green,
				 green,green, green, green, green,green  ,green,green, green, green,
					 green,whitesmoke,green, whitesmoke, lime);
    color:#333;
    padding: 0.25em 0.5em;
    letter-spacing: 0.1rem;
    text-shadow: 2px 2px 5px;
    position: absolute;
    margin-top: 70px;
    right: 0%;
    animation: showWelcome 0.5s ease-in-out 1s forwards;
}  

  @keyframes showWelcome {
    0% {
    top: -20px;
    transform: skew(0deg, -5deg) scaleY(0); 
}
    80% {
    top: 30px;
    transform: skew(10deg, -5deg) scaleY (1.2);
    }
    100% {
    top: 20px;
    transform: skew(-10deg, -5deg) scaleY(1);
    }
}  


             #textarea {
              display: block;
              margin: auto;
              border-left: 2px solid orange;
              border-top: 2px solid orange;
              border-right: 2px solid  skyblue;
              border-bottom: 2px solid skyblue;
              padding: 5px;
              width: 40%;
              height: 15vh; 
             }

										

			 /* Button */

				.button {
					display: block;
					margin: auto;
					border-radius: 5px;
					border: 0;
					background-color: #1eb8fb;
					color: #fff;
					cursor: pointer;
					padding: 0 1.5em;
					line-height: 2.75em;
					width: 20%;
					text-align: center;
					font-weight: 600;
					text-decoration: none;
					letter-spacing: 0.5px;
				}   
		
				
				.button:hover {
					background-color: darkcyan;
					color: #fff ;
				}
		
			
				.button:active {
					background-color: limegreen;
					color: #fff;
				}

          
          .submit {
              display: inline-block;
              margin: auto;
              width: 100%;
              height: 3rem; 
              border: none;
              font-size: xx-large;
              color: #000;
              background:radial-gradient(white, skyblue, orange, whitesmoke, darkgray);
             }

    /* Icons */

	       ul.icons {
             text-align: center;
             margin: 0;
		     cursor: default;
		     list-style: none;
		     padding-left: 0;
	           } 

	       ul.icons li {
		           display: inline-block;
		           line-height: 3em;
		           padding-left: 1em;
	           }

			   ul.icons li:first-child {
				           padding-left: 0;
			            }

			      ul.icons li a, ul.icons li span {
			     	   font-size: 1.25em;
			           border: 0;
		          	}

		      .icons a:hover {
				         	color: #474747;
				         }

		      .icons a:active {
				          	color: green;
			         	}


         .fa-twitter {
               color: skyblue ;
               font-size: 30px;
            }

        .fa-facebook-f {
               color: blue;
              font-size: 30px;
             }

        .fa-github {
              color: #000 ;
              font-size: 30px;
             }

        .fa-instagram {
               color: orange;
               font-size: 30px;
              }

        .fa-linkedIn {
                color: #000;
                font-size: 30px;
               }

        .fa-google-plus-g {
                 color: yellow;
                 font-size: 30px;
                }

        .fa-youtube {
                 color: red;
                 font-size: 30px;
                }

         .fa-wordpress {
                  color: blue;
                  font-size: 30px;
                 }
        
        .fa-tiktok {
            color: #000;
            font-size: 30px
        }

		.fa-cc-visa {
			font-size: 40px;
			width: 15px;
			height: auto;
			color: lime;
			margin-right: 3vh;
			
		}
       
   /* Icon */

	     .icon {
		          position: relative;
		          text-decoration: none;
	          } 

		 
	    .icon > .label {
			          display: none;
	          	}  

	    .icon.brands:before {
			           font-family: 'Font Awesome 5 Brands';
		            }  



   /* Footer */



   .footer .copyright {
	color: #999;
	margin-top: 1.5rem;
	text-align: center;
	font-size: 0.9em;
   }  

     .footer {
         text-align: center;
         padding: 0.1em; 
         margin-bottom: 10px;
		 color:#333;
		 margin-top: 0.5em;
         padding-bottom: 0.1em;
	        font-size: 0.8em; 
	      	}  

	  .footer a {
			 color: #37c0fb;
			 border-bottom-color: rgba(71, 71, 71, 0.25);
		      }  

	  .footer a:hover {
			    color: orange;
			    border-bottom-color: transparent;
		      	} 

	  .footer a:active {
			      	color: lime;
			      	border-bottom-color: transparent;
		      	} 





 /* * {
    margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
} 

*, *:before, *:after {
		box-sizing: inherit;
	} */
		
 /* Container */
	
	.container {
		margin: 0 auto;
		max-width: 100%;
		width: 1400px;
	}


		@media screen and (max-width: 480px) {

			.container {
				width: 100%;
			}

		} 

  /* Row */ 

	 .row {
		display:flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}   

     /* .row.aln-right {
		justify-content: flex-end;
		} */


	 	.row > .col-4 {
			width: 33.33333%;
		}
		
	 	.row > .off-4 {
			margin-left: 33.33333%;
		} 


	  .row > .col-6 {
			width: 50%;
		}

		 
		 .row > .off-6 {
			margin-left: 50%;
		} 

 
		 .row > .col-12 {
			width: 100%;
		}
		
	 
		 .row > .off-12 {
			margin-left: 100%;
		}    


  /* Mobile (Portrait) */

	@media screen and (max-width: 480px) {

		/* Icon */

			/* .icon.major {
				width: 4em;
				height: 4em;
				line-height: 4em;
				box-shadow: 0 0 0 7px white, 0 0 0 8px #e0e0e0;
			}

				.icon.major:before {
					font-size: 24px;
				} */
	
		/* Wrapper */

			 /* .wrapper {
				padding: 2em 20px 1px 20px;
			}  */

	}


	 @media screen and (max-width: 480px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				 .row > * {
					box-sizing: border-box;
				} 
				 .row.gtr-200 {
					 margin-top: -40px;
					 margin-left: -40px;
				  }

					.row.gtr-200 > * {
						padding: 40px 0 0 40px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -40px;
					}

					.row.gtr-200.gtr-uniform > * {
						padding-top: 40px;
					}

		        }  


		/* Section/Article */

	/* section.special, article.special {
		text-align: center;
	}  */


	header.major {
		text-align: center;
		margin: 0 0 2em 0;
	}


 
	 .icon:before {
			font-family: 'Font Awesome 5 Free'; 
		}   

		 .icon.solid:before {
			font-weight: 900;
		} 

		
   .icon > .label {
			 display: none;
		 } 
 
		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		} 

			.icon.major {
			text-align:center;
			cursor: default;
			background-color: darkcyan;
			color: #fff;
			border-radius: 100%;
			display: inline-block;
			width: 5em;
			height: 5em;
			line-height: 5em;
			box-shadow: 0 0 0 7px white, 0 0 0 7px #e0e0e0;
			margin: 0 0 2em 0;
		}

	 .icon.major:before {
			font-size: 36px;
		} 

  /* Icons */

		/* ul.icons {
			cursor: default;
			list-style: none;
			padding-left: 0;
	}  

	ul.icons li {
			display: inline-block;
			line-height: 1em;
			padding-left: 1.5em;
	}  

	ul.icons li:first-child {
			padding-left: 0;
	}  

	ul.icons li a, ul.icons li span {
			font-size: 2em;
			border: 0;
	}  */




   /* Mobile */

	@media screen and (max-width: 736px) {

		 .container {
				width: 90%;
			} 


		/* Basic */
  
	/*	 body, input, textarea { 
				font-size: 11pt;
				line-height: 1.35em;
			}  */

			/* h2 {
				font-size: 1.25em;
				letter-spacing: 0;
				line-height: 1.35em;
			}

			h3 {
				font-size: 1em;
				letter-spacing: 0;
				line-height: 1.35em;
			} */

			 header p {
				margin-top: -0.5em;
				font-size: 1em;
			 }

			header.major {
				padding: 0 20px;
			 }

			header.major h2 {
					font-size: 1.25em;
				}

			header.major p {
					top: 0;
					margin-top: 1.25em;
					font-size: 1em;
				 }   


		/* Wrapper */

			 .wrapper {
				padding: 2em 0 1px 0;
			} 

	}


    	@media screen and (max-width: 736px) {

		}
  
  /* Box */

		.box.highlight {
			text-align: center;
						} 
	

   /* Wrapper */

   	     .wrapper {
		    padding: 5em 0 3em 0;
	    }
		
		 
		.wrapper.style {
			background-color:darkcyan;
			color: blanchedalmond;
			
		} 


	 .wrapper.style .button { 
			background-color: #37c0fb; 
			color:#fff;
		 }  
		
		

		@media screen and (max-width: 736px) {

				 .row.gtr-200 {
					margin-top: -40px;
					margin-left: -40px;
				   }

					.row.gtr-200 > * {
						padding: 40px 0 0 40px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -40px;
					}

					.row.gtr-200.gtr-uniform > * {
						padding-top: 40px;
					} 

		       } 


  		@media screen and (max-width: 840px) {

		   .container {
				 width: 95%;
		  } 

		 }


  		@media screen and (max-width: 840px) {

		 	  .row {
			    	display: flex;
				    flex-wrap: wrap;
				    box-sizing: border-box;
				    align-items: stretch;
			      }

				 .row.gtr-200 {
					  margin-top: -60px;
					  margin-left: -60px;
				    }

					.row.gtr-200 > * {
						padding: 60px 0 0 60px;
					   }

					.row.gtr-200.gtr-uniform {
						margin-top: -60px;
					   }

						.row.gtr-200.gtr-uniform > * {
						padding-top: 60px;
					   } 

                   } 

			@media screen and (max-width: 840px) {
			
  }



  	@media screen and (max-width: 980px) {

			.container {
				width: 95%;
			}

		}

        /* Narrow */

	  @media screen and (max-width: 980px) {

		   /* Basic */

			body, input, select, textarea {
				font-size: 12pt;
				line-height: 1.5em;
			}

	}


    /* Narrow */

		@media screen and (max-width: 980px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

			.row > * {
					box-sizing: border-box;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

				.row.gtr-200 {
					margin-top: -60px;
					margin-left: -60px;
				}

					.row.gtr-200 > * {
						padding: 60px 0 0 60px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -60px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 60px;
						} 

		} 
	 
		
 	@media screen and (max-width: 1280px) {

			.container {
				width: 960px;
			}

		}

  		@media screen and (max-width: 1280px) {

			/* .row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			} */

		}
		
 
  @media screen and (max-width: 1680px) {

			.container {
				width: 1200px;
			}

		}

  /* Wide */

  	@media screen and (max-width: 1680px) {

		/* Basic */

			body, input, textarea {
				font-size: 14pt;
				line-height: 1.5em;
			}

	}

   /* Normal */

 	@media screen and (max-width: 1680px) {

		/* Basic */

			body, input, textarea {
				font-size: 14pt;
				line-height: 1.5em;
			}

    /* Icons */

			ul.icons li a, ul.icons li span {
				font-size: 1.5em;
			}

   /* Wrapper */

			.wrapper {
				padding: 3em 0 1em 0;
			}
			
	}


	@media screen and (max-width: 1680px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				  .row.gtr-200 {
					margin-top: -80px;
					margin-left: -80px;
				} 

					.row.gtr-200 > * {
						padding: 80px 0 0 80px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -80px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 80px;
						} 

		}