html{
min-height:100%;
}
body{
background-attachment:fixed;
background-origin:inital;
background-repeat:no repeat;
height:100%;
background: #ffffff; /* Fallback */
background: -moz-linear-gradient(top, #afafaf 0%, #afafaf 7%, #afafaf 12%, #caddeb 32%, #e5eff5 40%, #feffff 51%, #ffffff 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#669dc3), color-stop(7%,#75a6c9), color-stop(12%,#84b1cf), color-stop(32%,#caddeb), color-stop(40%,#e5eff5), color-stop(51%,#feffff), color-stop(100%,#ffffff));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #afafaf 0%,#afafaf 7%,#afafaf 12%,#caddeb 32%,#e5eff5 40%,#feffff 51%,#ffffff 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #afafaf 0%,#afafaf 7%,#afafaf 12%,#caddeb 32%,#e5eff5 40%,#feffff 51%,#ffffff 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #afafaf 0%,#afafaf 7%,#afafaf 12%,#caddeb 32%,#e5eff5 40%,#feffff 51%,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #afafaf 0%,#afafaf 7%,#afafaf 12%,#caddeb 32%,#e5eff5 40%,#feffff 51%,#ffffff 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#669dc3', endColorstr='#ffffff',GradientType=0 );
/* IE6-8 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2OWRjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjclIiBzdG9wLWNvbG9yPSIjNzVhNmM5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTIlIiBzdG9wLWNvbG9yPSIjODRiMWNmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMzIlIiBzdG9wLWNvbG9yPSIjY2FkZGViIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDAlIiBzdG9wLWNvbG9yPSIjZTVlZmY1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjZmVmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
}
.navLink{
font-size: 30px;
text-decoration: none;
font-family: 'Bebas Neue', cursive;
color: white;
letter-spacing: 4px;
text-shadow: 0.5px 0.5px black;
}
.navLink:hover{
transition-delay: 100ms;
color: aqua;
font-size: 35px;
}
.container {
display: grid;
justify-items: end;
margin-top: 10px;
position: relative;
font-size: 15px;
margin-bottom: 50px;
}
nav {
/*display: flex;*/
justify-content: flex-end;
border-bottom: 2.3px solid rgb(114, 114, 114);
padding: 0 55px 15px 55px;
}
.header {
text-align: center;
font-family: 'Bebas Neue', cursive;
font-size: 70px;
text-shadow: 2px 3.2px #8d8d8d;
}
.container {
-webkit-animation-name: circle_container;
animation-name: circle_container;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.header {
-webkit-animation-name: circle_container;
animation-name: circle_container;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.circle_container
{
width : 128px;
height : 128px;
position: absolute;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
/* border : 1px solid red; */
}
.circle_container {
-webkit-animation-name: circle_container;
animation-name: circle_container;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
/* Main Container - this controls the size of the circle */
.circle_container
{
width : 128px;
height : 128px;
position: absolute;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px;
/* border : 1px solid red; */
}
.circle_container {
-webkit-animation-name: circle_container;
animation-name: circle_container;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
/* Circle Main draws the actual circle */
.circle_main
{
width : 250%;
height : 250%;
border-radius : 50%;
border : 4px solid black;
margin : 0;
padding : 0;
}
/* Circle Text Container - constrains text area to within the circle */
.circle_text_container
{
/* area constraints */
width : 70%;
height : 70%;
max-width : 70%;
max-height : 70%;
margin : 0;
padding : 0;
/* some position nudging to center the text area */
position : relative;
left : 15%;
top : 15%;
/* preserve 3d prevents blurring sometimes caused by the text centering in the next class */
transform-style : preserve-3d;
/*border : 1px solid green;*/
}
/* Circle Text - the appearance of the text within the circle plus vertical centering */
.circle_text
{
/* change font/size/etc here */
font-family: 'Bebas Neue', cursive;
text-align : center;
font-size: 20.5px;
/* vertical centering technique */
position : relative;
top : 35%;
transform : translateY(-50%);
}
.responsive {
max-width: 100%;
text-align: left;
float: left;
object-fit: scale-down; max-width: 100%
height: auto;
}
.responsive1 {
max-width: 100%;
text-align: right;
float: right;
object-fit: scale-down; max-width: 100%
height: auto;
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
.responsive{
margin-top: 500px;
}
.responsive1{
margin-top: 500px;
}
}
.responsive {
-webkit-animation-name: circle_container;
animation-name: circle_container;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.responsive1 {
-webkit-animation-name: circle_container;
animation-name: circle_container;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.footer{
margin-top: 500px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.footer1{
margin-top: 10px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.footer2{
margin-top: 300px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.footer3{
margin-top: 600px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.footer4{
margin-top: 900px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.topImg{
border: 3.2px solid rgb(124, 124, 124);
width:auto;
width :300px;
height: 180px;
}
.row{
float: left;
width: 33.33%;
padding: 1px;
}
.footer::after {
content: "";
clear: both;
display: table;
}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
.row{
float: none;
width: auto;
padding: 5px;
}
}
.topImgP{
font-size: 21px;
letter-spacing: 2px;
text-decoration: none;
color: black;
font-family: 'Bebas Neue', cursive;
text-align: center;
}
.topImgP:hover{
font-size: 21px;
text-decoration: underline;
color: #24b3ccf5;
text-shadow: 1px 1px black;
}
.copyright{
text-align: center;
position: 'fixed'
bottom: 0;
}
.footer {
-webkit-animation-name: circle_container;
animation-name: circle_container;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.footer1 {
-webkit-animation-name: circle_container;
animation-name: circle_container;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.footer2 {
-webkit-animation-name: circle_container;
animation-name: circle_container;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.footer3 {
-webkit-animation-name: circle_container;
animation-name: circle_container;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.footer4 {
-webkit-animation-name: circle_container;
animation-name: circle_container;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.card{
-webkit-animation-name: circle_container;
animation-name: circle_container;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes circle_container {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.price {
color: grey;
font-size: 22px;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.card button:hover {
opacity: 0.7;
}
#fcf-form {
display:block;
}
.fcf-body {
margin: 30px 100px;
font-family: -apple-system, Arial, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
padding: 30px;
padding-bottom: 10px;
border: 1px solid #ced4da;
border-radius: 0.25rem;
max-width: 100%;
}
.fcf-form-group {
margin-bottom: 1rem;
}
.fcf-input-group {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: stretch;
align-items: stretch;
width: 100%;
}
.fcf-form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
outline: none;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.fcf-form-control:focus {
border: 1px solid #313131;
}
select.fcf-form-control[size], select.fcf-form-control[multiple] {
height: auto;
}
textarea.fcf-form-control {
font-family: -apple-system, Arial, sans-serif;
height: auto;
}
label.fcf-label {
display: inline-block;
margin-bottom: 0.5rem;
}
.fcf-credit {
padding-top: 10px;
font-size: 0.9rem;
color: #545b62;
}
.fcf-credit a {
color: #545b62;
text-decoration: underline;
}
.fcf-credit a:hover {
color: #0056b3;
text-decoration: underline;
}
.fcf-btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.fcf-btn {
transition: none;
}
}
.fcf-btn:hover {
color: #212529;
text-decoration: none;
}
.fcf-btn:focus, .fcf-btn.focus {
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.fcf-btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
.fcf-btn-primary:hover {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
}
.fcf-btn-primary:focus, .fcf-btn-primary.focus {
color: #fff;
background-color: #0069d9;
border-color: #0062cc;
box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn {
padding: 0.5rem 1rem;
font-size: 1.25rem;
line-height: 1.5;
border-radius: 0.3rem;
}
.fcf-btn-block {
display: block;
width: 100%;
}
.fcf-btn-block+.fcf-btn-block {
margin-top: 0.5rem;
}
input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
width: 100%;
}