html, body {
margin: 0;
padding: 0;
max-width: 1920px;
}
/* Header Part */
.index_Header_container {
background-color: black;
background: -o-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3)), url(images/mountainBackground.gif);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.3))), url(images/mountainBackground.gif);
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3)), url(images/mountainBackground.gif);
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
width:100%;
height:100vh;
-webkit-animation: darken 0.8s linear infinite;
animation: darken 0.8s linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(var(--scroll) * -1s);
animation-delay: calc(var(--scroll) * -1s);
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
header{
width:100%;
height:100vh;
display: grid;
display: -ms-grid;
-ms-grid-columns: 10px 1fr 1fr 1fr 1fr 1fr 10px;
grid-template-columns: 10px 1fr 1fr 1fr 1fr 1fr 10px;
-ms-grid-rows: auto auto auto auto auto auto auto auto auto;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
'. . . . . . .'
'. index_header_logo_container index_header_logo_container index_header_logo_container . . .'
'. index_header_logo_container index_header_logo_container index_header_logo_container . . .'
'. . . . index_header_p_welcome . .'
'. index_header_p_name index_header_p_name index_header_p_name index_header_p_name index_header_p_name .'
'. . . . . . .'
'. . index_header_button_contact . index_header_button_store . .'
'. . . . . . .'
'. . index_header_p_scroll index_header_p_scroll index_header_p_scroll . .';
text-align: center;
}
.index_header_logo_container{
-ms-grid-row: 2;
-ms-grid-row-span: 2;
-ms-grid-column: 2;
-ms-grid-column-span: 3;
grid-area: index_header_logo_container;
background-image: url("images/Logo.png");
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100%;
/*Remove white from LOGO*/
mix-blend-mode: multiply;
background-position: right 50% center;
}
.index_header_p_welcome {
-ms-grid-row: 4;
-ms-grid-column: 5;
grid-area: index_header_p_welcome;
background-color: #72BF44;
color: #fff;
height: 70px;
}
.index_header_p_welcome p {
font-size: 30px;
display: inline;
line-height: 70px;
font-family: 'Rubik', sans-serif;
}
.index_header_p_name{
-ms-grid-row: 5;
-ms-grid-column: 2;
-ms-grid-column-span: 5;
grid-area: index_header_p_name;
}
.index_header_p_name h1 {
text-transform: Uppercase;
font-family: 'Rubik', sans-serif;
font-size: 62px;
color: #E4E5E6;
background: -webkit-gradient(linear, left top, right top, from(#24243e), color-stop(#141E30), to(#0f0c29));
background: -o-linear-gradient(left, #24243e, #141E30, #0f0c29);
background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
-webkit-text-decoration-style: solid;
text-decoration-style: solid;
-webkit-text-decoration-color: #72BF44;
text-decoration-color: #72BF44;
}
.index_header_button_contact{
-ms-grid-row: 7;
-ms-grid-column: 3;
grid-area: index_header_button_contact;
}
.index_header_button_store{
-ms-grid-row: 7;
-ms-grid-column: 5;
grid-area: index_header_button_store;
}
.btn_10 {
display: block;
height: 60px;
font-size: 28px;
line-height: 55px;
text-decoration: none;
color: white;
-webkit-box-shadow: 0 1px 20px 4px #000000, 0 0 20px 4px #212121;
box-shadow: 0 1px 20px 4px #000000, 0 0 20px 4px #212121;
background: rgba(0,0,0,0.8);
}
.btn_10:hover {
-webkit-animation: draw1 0.75s linear forwards;
animation: draw1 0.75s linear forwards;
}
@-webkit-keyframes draw1 {
50% {
color: #bbd9a9;
-webkit-box-shadow: 0 1px 20px 4px #8bad77, 0 0 20px 4px #212121;
box-shadow: 0 1px 20px 4px #8bad77, 0 0 20px 4px #212121;
}
75% {
color: #8cc769;
-webkit-box-shadow: 0 1px 20px 4px #6bab45, 0 0 20px 4px #212121;
box-shadow: 0 1px 20px 4px #6bab45, 0 0 20px 4px #212121;
}
100% {
color: #72BF44;
-webkit-box-shadow: 0 1px 20px 4px #72BF44, 0 0 20px 4px #212121;
box-shadow: 0 1px 20px 4px #72BF44, 0 0 20px 4px #212121;
}
}
@keyframes draw1 {
50% {
color: #bbd9a9;
-webkit-box-shadow: 0 1px 20px 4px #8bad77, 0 0 20px 4px #212121;
box-shadow: 0 1px 20px 4px #8bad77, 0 0 20px 4px #212121;
}
75% {
color: #8cc769;
-webkit-box-shadow: 0 1px 20px 4px #6bab45, 0 0 20px 4px #212121;
box-shadow: 0 1px 20px 4px #6bab45, 0 0 20px 4px #212121;
}
100% {
color: #72BF44;
-webkit-box-shadow: 0 1px 20px 4px #72BF44, 0 0 20px 4px #212121;
box-shadow: 0 1px 20px 4px #72BF44, 0 0 20px 4px #212121;
}
}
.index_header_p_scroll{
-ms-grid-row: 9;
-ms-grid-column: 3;
-ms-grid-column-span: 3;
grid-area: index_header_p_scroll;
}
.index_header_p_scroll a{
position: relative;
z-index: 2;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #72BF44;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
-webkit-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
.index_header_p_scroll a:hover {
}
#index_header_scroll a {
padding:50px;
padding-top: 90px;
font-family: 'Times New Roman', serif;
color: white;
-webkit-box-shadow: 0 1px 20px 4px #000000, 0 0 20px 4px #212121;
box-shadow: 0 1px 20px 4px #000000, 0 0 20px 4px #212121;
background: rgba(0,0,0,0.8);
padding-bottom: 20px;
border-radius: 28px;
}
#index_header_scroll a span {
position: absolute;
top: 0;
left: 50%;
width: 34px;
height: 34px;
margin-left: -12px;
border-left: 2px solid white;
border-bottom: 2px solid white;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: sdb07 2s infinite;
animation: sdb07 2s infinite;
opacity: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#index_header_scroll a span:nth-of-type(1) {
top:-10px;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
#index_header_scroll a span:nth-of-type(2) {
top: 10px;
-webkit-animation-delay: .15s;
animation-delay: .15s;
}
#index_header_scroll a span:nth-of-type(3) {
top: 30px;
-webkit-animation-delay: .3s;
animation-delay: .3s;
}
@-webkit-keyframes sdb07 {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes sdb07 {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes darken {
50% {
opacity: 0.8;
}
60% {
opacity: 0.8;
}
70% {
opacity: 0.6;
}
80% {
opacity: 0.4;
}
90% {
opacity: 0.2;
}
100% {
opacity: 0.0;
}
}
@keyframes darken {
50% {
opacity: 0.8;
}
60% {
opacity: 0.8;
}
70% {
opacity: 0.6;
}
80% {
opacity: 0.4;
}
90% {
opacity: 0.2;
}
100% {
opacity: 0.0;
}
}
/* Header Stop */
/* Navigation Start */
.nav {
background-color: black;
padding: 25px;
}
.nav ul {
text-align: center;
-webkit-box-shadow: 0 1px 10px 2px #ffffff3b;
box-shadow: 0 1px 10px 2px #ffffff3b;
background: rgb(8 8 8);
text-align: center;
width: 80%;
margin: 0 auto;
border-radius: 35px;
padding: 30px;
-moz-animation: mymove 0.5s linear infinite;
-moz-animation-play-state: paused;
-moz-animation-delay: calc(var(--scroll) * -1s);
-moz-animation-iteration-count: 1;
-moz-animation-fill-mode: both;
-webkit-animation: mymove 0.5s linear infinite;
-webkit-animation-play-state: paused;
-webkit-animation-delay: calc(var(--scroll) * -1s);
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: both;
-ms-animation: mymove 0.5s linear infinite;
-ms-animation-play-state: paused;
-ms-animation-delay: calc(var(--scroll) * -1s);
-ms-animation-iteration-count: 1;
-ms-animation-fill-mode: both;
-o-animation: mymove 0.5s linear infinite;
-o-animation-play-state: paused;
-o-animation-delay: calc(var(--scroll) * -1s);
-o-animation-iteration-count: 1;
-o-animation-fill-mode: both;
animation: mymove 0.5s linear infinite;
animation-play-state: paused;
animation-delay: calc(var(--scroll) * -1s);
animation-iteration-count: 1;
animation-fill-mode: both;
}
.nav ul li {
display: inline-block;
-webkit-animation: mymove 0.8s linear infinite;
animation: mymove 0.8s linear infinite;
-webkit-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation-delay: calc(var(--scroll) * -1s);
animation-delay: calc(var(--scroll) * -1s);
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.nav ul li a{
font-family: 'Times New Roman', serif;
font-weight: 200;
color: White;
font-size: 26px;
text-decoration: none;
margin-left: 15px;
margin-right: 15px;
opacity: .6;
}
.nav ul li a:hover {
opacity: .8;
}
.active {
opacity: 1 !important;
padding-bottom: 8px;
border-bottom: solid thin red;
}
@-moz-keyframes mymove {
from {
opacity: 0;
}
to {
opacity: 1.8;
}
}
@-webkit-keyframes mymove {
from {
opacity: 0;
}
to {
opacity: 1.8;
}
}
@keyframes mymove {
from {
opacity: 0;
}
to {
opacity: 1.8;
}
}
/* Navigation End */
/* Content Start */
.content {
}
.content_heading {
text-align: center;
text-transform: uppercase;
letter-spacing: .5em;
border: 4px double rgba(0,0,0,.25);
border-width: 4px 0;
margin-top: 20px;
margin-bottom: 20px;
}
.content_heading h1{
font-family: "Oswald", sans-serif;
font-size: 60px;
font-weight: 700;
letter-spacing: 0;
padding: 20px;
display: block;
margin: 0 auto;
text-shadow: 0 0 80px rgba(255,255,255,.5);
background: url(images/animated-text-fill.png) repeat-y;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
-webkit-animation: aitf 80s linear infinite;
webkit-animation: aitf 80s linear infinite;
-webkit-transform: translate3d(0%,0,0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
@-webkit-keyframes aitf {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
.content_div_Containers {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
background-color: rgba(255, 255, 255, .15);
}
.content_Div {
width: 300px;
height: auto;
margin: 10px;
background-color: rgba(21, 33, 46, 1);
color: white;
padding: 10px 20px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 26px 5px #15212E;
box-shadow: 0px 0px 26px 5px #15212E;
cursor: pointer;
}
.content_Div a {
text-decoration: none;
text-align: center;
font-size: 20px
}
.content_Div a h3 {
color: #337ab7;
text-decoration: none;
text-align: center;
font-size: 20px
}
.content_Div p {
text-align: center;
font-size: 18px;
color: white;
}
.content_Div p em {
}
.domestic_h3 {
}
.domestic_p {
}
.blinking{
}
@keyframes blinkingText{
0%{ color: #337ab7; }
50%{ color: #a72c2c; }
10%{ color: #337ab7; }
}
@keyframes blinkingPara{
0%{ color: #fff; }
50%{ color: #337ab7; }
10%{ color: #fff; }
}
/* Content End */
/* responsive */
@media only screen and (max-width: 1260px) {
header{
width:100%;
height:100vh;
display: grid;
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr !important;
grid-template-columns: 10px 1fr 1fr 1fr 10px;
-ms-grid-rows: 20vh 10vh 30vh 20vh 20vh !important;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
'. index_header_logo_container index_header_logo_container index_header_logo_container .'
'. index_header_p_welcome . . .'
'. index_header_p_name index_header_p_name index_header_p_name .'
'. index_header_button_contact . index_header_button_store .'
'. . index_header_p_scroll . .';
text-align: center;
}
.index_header_logo_container{
grid-area: index_header_logo_container;
-ms-grid-row: 1 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 3 !important;
background-position: center 0 !important;
width: 100% !important;
}
.index_header_p_welcome {
grid-area: index_header_p_welcome;
-ms-grid-row: 2 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 1 !important;
width: 100% !important;
margin-top: 10px !important;
}
.index_header_p_name {
grid-area: index_header_p_name;
-ms-grid-row: 3 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 3 !important;
margin: 0 auto;
}
.index_header_button_contact {
grid-area: index_header_button_contact;
-ms-grid-row: 4 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 1 !important;
}
.index_header_button_store {
grid-area: index_header_button_store;
-ms-grid-row: 4 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 3 !important;
-ms-grid-column-span: 1 !important;
}
.index_header_p_scroll {
grid-area: index_header_p_scroll;
-ms-grid-row: 5 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 2 !important;
-ms-grid-column-span: 1 !important;
}
#index_header_scroll a {
box-shadow: 0px 0px 30px 1px #000000 !important;
background: rgba(0,0,0,0.4) !important;
}
.index_header_logo_container {
width: 80% !important;
}
.index_header_p_name h1 {
font-size: 52px !important;
}
.nav ul{
width: 95% !important;
}
}
@media only screen and (max-width: 1060px) {
.content_heading h1{
font-size: 55px;
padding: 10px;
}
header{
width:100%;
height:100vh;
display: grid;
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr !important;
grid-template-columns: 10px 1fr 1fr 1fr 10px;
-ms-grid-rows: 20vh 10vh 30vh 20vh 20vh !important;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
'. index_header_logo_container index_header_logo_container index_header_logo_container .'
'. index_header_p_welcome . . .'
'. index_header_p_name index_header_p_name index_header_p_name .'
'. index_header_button_contact . index_header_button_store .'
'. . index_header_p_scroll . .';
text-align: center;
}
.index_header_logo_container{
grid-area: index_header_logo_container;
-ms-grid-row: 1 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 3 !important;
background-position: center 0 !important;
width: 100% !important;
}
.index_header_p_welcome {
grid-area: index_header_p_welcome;
-ms-grid-row: 2 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 1 !important;
width: 100% !important;
margin-top: 10px !important;
}
.index_header_p_name {
grid-area: index_header_p_name;
-ms-grid-row: 3 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 3 !important;
margin: 0 auto;
}
.index_header_button_contact {
grid-area: index_header_button_contact;
-ms-grid-row: 4 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 1 !important;
}
.index_header_button_store {
grid-area: index_header_button_store;
-ms-grid-row: 4 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 3 !important;
-ms-grid-column-span: 1 !important;
}
.index_header_p_scroll {
grid-area: index_header_p_scroll;
-ms-grid-row: 5 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 2 !important;
-ms-grid-column-span: 1 !important;
}
#index_header_scroll a {
box-shadow: 0px 0px 30px 1px #000000 !important;
background: rgba(0,0,0,0.4) !important;
}
.index_header_p_welcome p {
font-size: 24px !important;
}
.index_header_p_name h1 {
font-size: 45px !important;
}
.nav ul li a{
font-size: 20px !important;
}
}
@media only screen and (max-width: 890px) {
.content_heading h1{
font-size: 50px;
padding: 1px;
}
header{
width:100%;
height:100vh;
display: grid;
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr !important;
grid-template-columns: 10px 1fr 1fr 1fr 10px;
-ms-grid-rows: 20vh 10vh 30vh 20vh 20vh !important;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
'. index_header_logo_container index_header_logo_container index_header_logo_container .'
'. index_header_p_welcome . . .'
'. index_header_p_name index_header_p_name index_header_p_name .'
'. index_header_button_contact . index_header_button_store .'
'. . index_header_p_scroll . .';
text-align: center;
}
.index_header_logo_container{
grid-area: index_header_logo_container;
-ms-grid-row: 1 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 3 !important;
background-position: center 0 !important;
width: 100% !important;
}
.index_header_p_welcome {
grid-area: index_header_p_welcome;
-ms-grid-row: 2 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 1 !important;
width: 100% !important;
margin-top: 10px !important;
}
.index_header_p_name {
grid-area: index_header_p_name;
-ms-grid-row: 3 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 3 !important;
margin: 0 auto;
}
.index_header_button_contact {
grid-area: index_header_button_contact;
-ms-grid-row: 4 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 1 !important;
}
.index_header_button_store {
grid-area: index_header_button_store;
-ms-grid-row: 4 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 3 !important;
-ms-grid-column-span: 1 !important;
}
.index_header_p_scroll {
grid-area: index_header_p_scroll;
-ms-grid-row: 5 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 2 !important;
-ms-grid-column-span: 1 !important;
}
#index_header_scroll a {
box-shadow: 0px 0px 30px 1px #000000 !important;
background: rgba(0,0,0,0.4) !important;
}
.nav {
padding: 20px !important;
}
.nav ul {
padding: 20px 1px 20px 1px !important;
}
.nav ul li a {
margin-left: 10px !important;
margin-right: 10px !important;
}
}
@media only screen and (max-width: 802px) {
.content_heading h1{
font-size: 45px;
padding: 1px;
}
header{
width:100%;
height:100vh;
display: grid;
display: -ms-grid;
-ms-grid-columns: 1fr 1.4fr 1fr !important;
grid-template-columns: 10px 1fr 1.4fr 1fr 10px;
-ms-grid-rows: 20vh 10vh 30vh 30vh 10vh !important;
grid-template-rows: 20vh 10vh 30vh 30vh 10vh !important;
grid-template-areas:
'. index_header_logo_container index_header_logo_container index_header_logo_container .'
'. index_header_p_welcome . . .'
'. index_header_p_name index_header_p_name index_header_p_name .'
'. index_header_button_contact . index_header_button_store .'
'. . index_header_p_scroll . .';
text-align: center;
}
.nav {
padding: 1px !important;
background-color: black;
padding-bottom: 20px !important;
}
.nav ul {
text-align: center;
-webkit-box-shadow: none !important;
box-shadow: none !important;
background: none !important;
text-align: center;
width: 80%;
margin: 0 auto;
border-radius: none !important;
padding: 1px !important;
}
.nav ul li{
display: inline-block;
margin-top: 20px;
padding-left: 20px !important;
padding-right: 20px !important;
border-right: solid thin #4f5c4e !important;
border-left: solid thin #4f5c4e !important;
}
.nav ul li:last-child {
/*border-right: none !important;*/
}
.nav ul li a{
margin: 1px !important;
padding: 1px !important;
color: White;
font-size: 26px;
text-decoration: none;
padding-left: 5px !important;
padding-right: 5px !important;
opacity: .8 !important;
padding-bottom: 5px !important;
/*
border-left: solid thin white !important;
border-right: solid thin white !important;
*/
}
.nav ul li a:hover {
opacity: 1 !important;
border-bottom: solid 1.5px #72BF44;
}
.content_heading {
margin-bottom: 30px !important;
}
.content_Div {
width: 250px !important;
padding: 5px 10px !important;
}
.index_header_p_scroll a {
transform: translate(0, 0) !important;
}
}
@media only screen and (max-width: 600px) {
.content_heading h1{
font-size: 40px;
padding: 1px;
}
header{
width:100%;
height:100vh;
display: grid;
display: -ms-grid;
-ms-grid-columns: 1fr 1fr !important;
grid-template-columns:1fr 1fr;
-ms-grid-rows: 20vh 10vh 30vh 20vh 20vh !important;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
'index_header_logo_container index_header_logo_container'
'index_header_p_welcome .'
'index_header_p_name index_header_p_name'
'index_header_button_contact index_header_button_store'
'index_header_p_scroll index_header_p_scroll';
text-align: center;
}
.index_header_logo_container{
grid-area: index_header_logo_container;
-ms-grid-row: 1 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 2 !important;
background-position: center 0 !important;
width: 100% !important;
}
.index_header_p_welcome {
grid-area: index_header_p_welcome;
-ms-grid-row: 2 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 1 !important;
width: 100% !important;
margin-top: 10px !important;
}
.index_header_p_name {
grid-area: index_header_p_name;
-ms-grid-row: 3 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 2 !important;
margin: 0 auto;
}
.index_header_button_contact {
grid-area: index_header_button_contact;
-ms-grid-row: 4 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 1 !important;
}
.index_header_button_store {
grid-area: index_header_button_store;
-ms-grid-row: 4 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 2 !important;
-ms-grid-column-span: 1 !important;
}
.index_header_p_scroll {
grid-area: index_header_p_scroll;
-ms-grid-row: 5 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 2 !important;
}
.content_Div {
width: 65% !important;
padding: 10px 20px !important;
}
.btn_10 {
margin-left: 10px !important;
margin-right: 10px !important;
font-size: 22px !important;
}
.index_header_p_scroll a {
transform: translate(0, 50%) !important;
-webkit-transform: translate(0, 50%) !important;
}
}
@media only screen and (max-width: 450px) {
.content_heading h1{
font-size: 38px;
padding: 1px;
}
.content_Div {
width: 80% !important;
}
.nav ul {
text-align: center;
-webkit-box-shadow: none !important;
box-shadow: none !important;
background: none !important;
text-align: center;
width: 80%;
margin: 0 auto;
border-radius: none !important;
padding: 1px !important;
display: grid;
grid-template-columns: 1fr 1fr;
display: -ms-grid;
-ms-grid-columns: 1fr 1fr;
}
.nav ul > *:nth-child(1) {
-ms-grid-row: 1 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 1 !important;
}
.nav ul > *:nth-child(2) {
-ms-grid-row: 1 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 2 !important;
-ms-grid-column-span: 1 !important;
}
.nav ul > *:nth-child(3) {
-ms-grid-row: 2 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 1 !important;
}
.nav ul > *:nth-child(4) {
-ms-grid-row: 2 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 2 !important;
-ms-grid-column-span: 1 !important;
}
.nav ul > *:nth-child(5) {
-ms-grid-row: 3 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 1 !important;
}
.nav ul > *:nth-child(6) {
-ms-grid-row: 3 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 2 !important;
-ms-grid-column-span: 1 !important;
}
.nav ul > *:nth-child(7) {
-ms-grid-row: 4 !important;
-ms-grid-row-span: 1!important;
-ms-grid-column: 1 !important;
-ms-grid-column-span: 2 !important;
}
.nav ul li:last-child {
/*border-right: none !important;*/
grid-column-start: 1 !important;
grid-column-end: 3 !important;
}
}
@media only screen and (max-width: 400px) {
.content_heading h1{
font-size: 32px;
padding: 1px;
}
header{
width:100%;
height:100vh;
display: flex ! important;
flex-direction: column !important;
justify-content: center !important;
text-align: center;
}
.index_header_logo_container{
background-position: center 0 !important;
width: 100% !important;
height: 150px !important;
}
.index_header_p_welcome {
margin-top: 10px !important;
}
.index_header_p_name {
margin: 0 auto;
flex: 2;
display: flex;
justify-content: center !important;
align-items: center !important;
}
.index_header_p_name h1 {
font-size: 32px !important;
text-transform: Uppercase;
font-family: 'Rubik', sans-serif;
color: #E4E5E6;
background: -webkit-gradient(linear, left top, right top, from(#24243e), color-stop(#141E30), to(#0f0c29));
background: -o-linear-gradient(left, #24243e, #141E30, #0f0c29);
background: linear-gradient(to right, #24243e, #141E30, #0f0c29);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
-webkit-text-decoration-style: solid;
text-decoration-style: solid;
-webkit-text-decoration-color: #72BF44;
text-decoration-color: #72BF44;
}
.index_header_button_contact {
}
.index_header_button_store {
margin-top: 30px !important;
}
.index_header_p_scroll {
height: 150px !important;
margin: 0 !important;
padding: 0 !important;
flex: 1;
margin-top: 100px !important;
}
.index_header_p_scroll a{
/*
-webkit-transform: translate(0, 1px) !important;
-ms-transform: translate(0, 1px) !important;
transform: translate(0, 1px) !important;
*/
display: block !important;
margin: 0 !important;
transform: translate(0, -50%) !important;
-webkit-transform: translate(0, -50%) !important;
/*
position: relative;
z-index: 2;
color: #72BF44;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
-webkit-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
display: block !important;
*/
}
.nav {
padding: 1px !important;
background-color: black;
padding-bottom: 22px !important;
}
.nav ul {
text-align: center;
-webkit-box-shadow: none !important;
box-shadow: none !important;
background: none !important;
text-align: center;
width: 80%;
margin: 0 auto;
border-radius: none !important;
padding: 1px !important;
display: grid;
grid-template-columns: 1fr 1fr;
display: -ms-grid;
-ms-grid-columns: 1fr 1fr;
}
.nav ul:last-child {
grid-column-start: 1 !important;
grid-column-end: 3 !important;
-ms-grid-column-span: 3;
}
.nav ul li{
display: inline-block;
margin-top: 20px;
padding-left: 20px !important;
padding-right: 20px !important;
border-right: solid thin #4f5c4e !important;
border-left: solid thin #4f5c4e !important;
}
.nav ul li:last-child {
/*border-right: none !important;*/
grid-column-start: 1 !important;
grid-column-end: 3 !important;
}
.nav ul li a{
margin: 1px !important;
padding: 1px !important;
color: White;
font-size: 26px;
text-decoration: none;
padding-left: 5px !important;
padding-right: 5px !important;
opacity: .8 !important;
padding-bottom: 5px !important;
/*
border-left: solid thin white !important;
border-right: solid thin white !important;
*/
}
.nav ul li a:hover {
opacity: 1 !important;
border-bottom: solid 1.5px #72BF44;
}
.content_Div {
width: 65% !important;
padding: 10px 20px !important;
}
}
@media only screen and (max-height: 500px) {
.index_header_p_scroll {
display: none !important;
}
}
/* for IE 11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
header{
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
-ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
}
header> *:nth-child(1){
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 2;
-ms-grid-column-span: 3;
}
header> *:nth-child(2){
-ms-grid-row: 3;
-ms-grid-column: 5;
}
header> *:nth-child(3){
-ms-grid-row: 4;
-ms-grid-column: 2;
-ms-grid-column-span: 5;
}
header> *:nth-child(4){
-ms-grid-row: 6;
-ms-grid-column: 3;
}
header> *:nth-child(5){
-ms-grid-row: 6;
-ms-grid-column: 5;
}
header> *:nth-child(6){
-ms-grid-row: 8;
-ms-grid-column: 3;
-ms-grid-column-span: 3;
}
.index_header_logo_container{
background-image: url("images/logo_Trans.png");
background-size: contain;
background-repeat: no-repeat;
width: 60%;
height: 100%;
}
.index_header_p_name h1 {
text-transform: Uppercase;
font-family: 'Rubik', sans-serif;
font-size: 62px;
color: #24243e;
background:none;
}
.index_header_p_scroll a{
-webkit-transform: translate(0, 50%);
-ms-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.nav {
animation: none;
-moz-animation: none;
-webkit-animation: none;
-ms-animation: none;
-o-animation: none;
}
.nav ul {
text-align: center;
-webkit-box-shadow: 0 1px 10px 2px #A6A8A8;
box-shadow: 0 1px 10px 2px #A6A8A8;
-moz-box-shadow: 0 1px 10px 2px #A6A8A8;
-ms-box-shadow: 0 1px 10px 2px #A6A8A8;
-o-box-shadow: 0 1px 10px 2px #A6A8A8;
background: #080808;
text-align: center;
width: 80%;
margin: 0 auto;
border-radius: 35px;
padding: 30px;
animation: none;
-moz-animation: none;
-webkit-animation: none;
-ms-animation: none;
-o-animation: none;
}
.nav ul li {
display: inline-block;
animation: none;
-moz-animation: none;
-webkit-animation: none;
-ms-animation: none;
-o-animation: none;
}
.content_heading h1{
font: 700 4em/1 "Oswald", sans-serif;
letter-spacing: 0;
padding: .25em 0 .325em;
display: block;
margin: 0 auto;
background: none;
text-shadow: 0px 0px 7px black;
color: #edeff2;
background: #4A4A4A;
background: -webkit-linear-gradient(to right, #4A4A4A 0%, #74C148 20%, #4A4A4A 40%, #74C148 60%, #4A4A4A 80%, #74C148 100%);
background: -moz-linear-gradient(to right, #4A4A4A 0%, #74C148 20%, #4A4A4A 40%, #74C148 60%, #4A4A4A 80%, #74C148 100%);
background: linear-gradient(to right, #4A4A4A 0%, #74C148 20%, #4A4A4A 40%, #74C148 60%, #4A4A4A 80%, #74C148 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content_div_Containers {
justify-content: space-around;
width: 90%;
margin: 0 auto;
}
}
@supports (-ms-ime-align:auto) {
header{
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
-ms-grid-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
}
header> *:nth-child(1){
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 2;
-ms-grid-column-span: 3;
}
header> *:nth-child(2){
-ms-grid-row: 3;
-ms-grid-column: 5;
}
header> *:nth-child(3){
-ms-grid-row: 4;
-ms-grid-column: 2;
-ms-grid-column-span: 5;
}
header> *:nth-child(4){
-ms-grid-row: 6;
-ms-grid-column: 3;
}
header> *:nth-child(5){
-ms-grid-row: 6;
-ms-grid-column: 5;
}
header> *:nth-child(6){
-ms-grid-row: 8;
-ms-grid-column: 3;
-ms-grid-column-span: 3;
}
.index_header_logo_container{
background-image: url("images/logo_Trans.png");
background-size: contain;
background-repeat: no-repeat;
width: 60%;
height: 100%;
}
.index_header_p_name h1 {
text-transform: Uppercase;
font-family: 'Rubik', sans-serif;
font-size: 62px;
color: #24243e;
background:none;
}
.index_header_p_scroll a{
-webkit-transform: translate(0, 50%);
-ms-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.nav {
animation: none;
-moz-animation: none;
-webkit-animation: none;
-ms-animation: none;
-o-animation: none;
}
.nav ul {
text-align: center;
-webkit-box-shadow: 0 1px 10px 2px #A6A8A8;
box-shadow: 0 1px 10px 2px #A6A8A8;
-moz-box-shadow: 0 1px 10px 2px #A6A8A8;
-ms-box-shadow: 0 1px 10px 2px #A6A8A8;
-o-box-shadow: 0 1px 10px 2px #A6A8A8;
background: #080808;
text-align: center;
width: 80%;
margin: 0 auto;
border-radius: 35px;
padding: 30px;
animation: none;
-moz-animation: none;
-webkit-animation: none;
-ms-animation: none;
-o-animation: none;
}
.nav ul li {
display: inline-block;
animation: none;
-moz-animation: none;
-webkit-animation: none;
-ms-animation: none;
-o-animation: none;
}
.content_div_Containers {
justify-content: space-around;
width: 90%;
margin: 0 auto;
}
}
/*
filter: opacity(50%);
*/