body {
margin: 0;
padding: 0;
/*font-family: 'Roboto Condensed', sans-serif;*/
font-family: 'Source Sans Pro', sans-serif;
}
#header {
position: relative;
width: 100%;
height: 500px;
background-image: url("images/home-background.jpeg");
background-color: rgba(61,168,52,255);
background-position: 0px -80px;
background-size: 100%;
background-repeat: no-repeat;
}
@media only screen and (max-width: 1000px) {
#header {
position: relative;
width: 100%;
height: 500px;
background-image: url("images/home-background.jpeg");
background-color: rgba(61,168,52,255);
background-position: 0px -80px;
background-size: 1000px;
background-repeat: no-repeat;
}
#headerrt {
position: relative;
width: 100%;
height: 500px;
background-image: url("images/header-rt2.jpg");
background-color: rgba(61,168,52,255);
background-position: 0px -200px;
background-size: 1000px;
background-repeat: no-repeat;
}
#menubar{
font-size: 30px;
}
}
#headerrt {
position: relative;
width: 100%;
height: 500px;
background-image: url("images/header-rt2.jpg");
background-color: rgba(61,168,52,255);
background-position: 0px -200px;
background-size: 100%;
background-repeat: no-repeat;
}
#menubar {
position: absolute;
width: 100%;
min-width: 400px;
height: 100px;
background-color: none;
float: right;
top:0;
}
#menubar-listtm{
list-style-type: none;
margin: 0;
padding: 0;
}
#menubar-listtm li{
float: right;
}
#menubar-listtm li a{ /*Anpassung für Mobile notwendig*/
display: block;
padding-left: 10px;
padding-right: 20px;
padding-top: 20px;
text-decoration: none;
font-size: 19px;
font-weight: bold;
color: rgb(0, 0, 0)
}
#menubar-listtm li a:hover{
color: rgba(61,168,52,255);
}
#menubar-list{
list-style-type: none;
margin: 0;
padding: 0;
}
#menubar-list li{
float: right;
}
#menubar-list li a{ /*Anpassung für Mobile notwendig*/
display: block;
padding-left: 10px;
padding-right: 20px;
padding-top: 20px;
text-decoration: none;
font-size: 17px;
font-weight: bold;
color:black;
}
#menubar-list li a:hover{
color: orange;
}
#content {
position: relative;
width: 100%;
height: auto;
background-color: none;
}
#contentlogin {
position: relative;
width: 100%;
height: auto;
background-color: rgba(255, 166, 0, 0.26);;
}
#c1 {
position: relative;
width: 100%;
height: 120px;
text-align: center;
}
.c1line{
position: relative;
height: 15px;
width: 100%;
background-image: linear-gradient(to bottom, rgba(61,168,52,255) 30% , white 75%)
}
#c2 {
position: relative;
width: 100%;
height: auto;
text-align: center;
padding-top: 0px;
}
#c2um{
position: relative;
width: 80%;
left: 10%;
text-align: justify;
font-size: 20px;
}
#c2tm{
position: relative;
width: 80%;
left: 10%;
text-align: center;
font-size: 20px;
}
#c2c{
position: relative;
width: 80%;
left: 10%;
text-align: justify;
font-size: 20px;
}
#c3slider{
position: relative;
width: 100%;
height: 600px;
text-align: justify;
font-size: 20px;
background-color: none;
}
.container{
width: 80%;
left:10%;
height: 600px;
position: relative;
overflow: hidden;
}
.wrapper{
width: 100%;
display: flex;
animation: slide 16s infinite;
}
@keyframes slide{
0%{
transform: translateX(0);
}
25%{
transform: translateX(0);
}
30%{
transform: translateX(-100%);
}
50%{
transform: translateX(-100%);
}
55%{
transform: translateX(-200%);
}
75%{
transform: translateX(-200%);
}
80%{
transform: translateX(-300%);
}
100%{
transform: translateX(-300%);
}
}
#c2rt{
position: relative;
width: 80%;
left: 10%;
text-align: center;
font-size: 20px;
}
#c2rt a{
text-decoration: none;
color: orange;
font-weight: bold;
}
#c2rt a:hover{
color: rgb(180, 88, 1);
}
#c2rt2{
position: relative;
width: 80%;
left: 10%;
text-align: justify;
font-size: 20px;
}
#c21 {
position: relative;
left: 35%;
right: 35%;
width: 30%;
height: 100px;
padding-top:-200px;
}
#c22 {
position: relative;
left: 35%;
right: 35%;
width: 30%;
height: 50px;
padding-top:-200px;
}
#c22l {
position: absolute;
left:0%;
width: 50%;
height: 100%;
text-align: right;
}
#c22r {
position: absolute;
left:50%;
width: 50%;
height: 100%;
text-align: left;
}
#c22buttonl{
height: 100%;
width: 100%;
min-width: 80px;
max-width: 200px;
background-color: orange;
border: none;
outline: 0 none;
font-size: 16px;
font-weight: bold;
}
#c22buttonl:hover{
cursor: pointer;
}
#c22buttonr{
height: 100%;
width: 100%;
min-width: 80px;
max-width: 200px;
background-color: grey;
border: none;
outline: 0 none;
font-size: 16px;
}
#c22buttonr:hover{
cursor: pointer;
}
#c21l{
position: absolute;
width: 85%;
height: 100%;
left:0;
}
#c21r{
position: absolute;
width: 15%;
height: 100%;
left:85%;
}
#search{
width: 100%;
height: 20px;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 20px;
background-color: #F2F2F2;
}
#search:focus{
outline: 0 none;
}
#searchsubmit{
height: 46px;
width: 100%;
min-width: 50px;
background-color: orange;
border: none;
outline: 0 none;
cursor: pointer;
}
#cinner {
position: relative;
width: 100%;
height: auto;
background-image: linear-gradient(to top, #E9E5E5 30% , white 75%)
/*background-color: #F2F2F2;*/
}
#cinner2 {
position: relative;
width: 80%;
left: 10%;
height: auto;
font-size: 19px;
text-align: justify;
}
#cinner2login{
position: relative;
width: 100%;
text-align: center;
}
/*#cinner2login input[type=text], input[type=password], input[type=email], input[type=number]{
width: 30%;
height: 20px;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: #F2F2F2;
}*/
#cinner2login input[type=submit]{
height: 40px;
width: 30%;
background-color: orange;
border: none;
cursor: pointer;
color: white;
font-size: 16px;
box-shadow: 5px 5px 5px gray;
}
#contacta{
text-decoration: none;
color: rgb(109, 74, 44);
cursor: pointer;
}
#contacta:hover{
color: orange;
}
#messagecontact{
color: green;
font-weight: bold;
font-size: 18px;
}
#textareacontact{
width: 30%;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: #F2F2F2;
color: gray;
font-size: 16px;
text-align: left !important;
}
#cinner2login input[type=text]:focus{
outline: 0 none;
}
#cinner2loginreg{
position: relative;
width: 100%;
}
#cinner2loginreg a{
text-decoration: none;
color: black;
font-size: 15px;
}
#cinner2flexcontainer{
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 15px;
}
.cinner2flexitem{
flex-direction: row;
width: 300px;
height: 100px;
box-shadow: 10px 5px 5px gray;
margin: .5em;
padding: .5em;
background-color: rgba(255, 166, 0, 0.26);
text-align: center;
}
.itemtitle{
position: relative;
width: 100%;
height: 25px;
font-weight: normal;
font-size: 25px;
}
.itemdescription1{
position: relative;
width: 80%;
left: 10%;
height: auto;
font-size: 20px;
}
.itemdescription2{
position: relative;
width: 80%;
left: 10%;
height: auto;
font-size: 15px;
}
.itemprice{
position: relative;
width: 80%;
left: 10%;
top: 20px;
height: auto;
font-size: 45px;
color: orange;
font-weight: bold;
}
.itempricedesc{
position: relative;
width: 80%;
left: 10%;
height: auto;
font-size: 15px;
color: gray;
}
.itempricebuy{
position: relative;
width: 80%;
left: 10%;
height: auto;
font-size: 15px;
color: gray;
}
.itempricebuy button{
height: 40px;
width: 100%;
background-color: orange;
border: none;
cursor: pointer;
color: white;
font-size: 16px;
box-shadow: 5px 5px 5px gray;
}
.itempricebuy button:hover{
background-color: rgb(255, 193, 77);
color: black;
}
#c2content{
position: relative;
background-image: linear-gradient(to top, #E9E5E5 30% , white 75%)
}
#c2contentcontainer{
position: relative;
width: 90%;
height: auto;
left: 5%;
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 15px;
}
.c2contentflexitem{
flex-direction: column;
width: 100%;
height: 180px;
box-shadow: 2px 5px 5px lightgray;
margin: .5em;
padding: .5em;
background-color: rgba(211, 211, 211, 0.144);
text-align: center;
}
.cfi1{
position: absolute;
left: 25px;
top: 25px;
width: 120px;
height: 120px;
background-color: none;
}
.cfi2{
position: absolute;
top: 30px;
width: 40%;
left: 28%;
height: 30px;
font-size: 22px;
font-weight: bold;
text-align: left;
}
.cfi4{
position: absolute;
top: 60px;
width: 40%;
left: 28%;
height: 20px;
font-size: 15px;
font-weight: bold;
text-align: left;
}
.cfi3{
position: absolute;
top: 85px;
width: 40%;
left: 28%;
height: 40px;
font-size: 18px;
font-weight: bold;
text-align: left;
color: gray;
}
.cfi5{
position: absolute;
top: 150px;
width: 20%;
left: 2.5%;
height: 20px;
font-size: 13px;
font-weight: bold;
text-align: center;
color: gray;
}
.cfi51{
position: absolute;
top: 170px;
width: 20%;
left: 2.5%;
height: 20px;
font-size: 13px;
font-weight: normal;
text-align: center;
}
.cfi6{
position: absolute;
top: 150px;
width: 20%;
left: 25%;
height: 20px;
font-size: 13px;
font-weight: bold;
text-align: center;
color: gray;
}
.cfi61{
position: absolute;
top: 170px;
width: 20%;
left: 25%;
height: 20px;
font-size: 13px;
font-weight: normal;
text-align: center;
}
.cfi7{
position: absolute;
top: 150px;
width: 20%;
left: 47.5%;
height: 20px;
font-size: 13px;
font-weight: bold;
text-align: center;
color: gray;
}
.cfi71{
position: absolute;
top: 170px;
width: 20%;
left: 47.5%;
height: 20px;
font-size: 13px;
font-weight: normal;
text-align: center;
}
.cfi8{
position: absolute;
top: 75px;
width: 18%;
left: 80%;
height: 50px;
font-size: 25px;
font-weight: bold;
text-align: left;
color: orange;
}
.cfi9{
position: absolute;
top: 140px;
left: 80%;
width: 15%;
height: 30px;
}
.fibuy{
height: 40px;
width: 100%;
background-color: orange;
border: none;
cursor: pointer;
color: white;
font-size: 16px;
box-shadow: 5px 5px 5px gray;
}
.fibuy:hover{
background-color: rgb(255, 193, 77);
color: black;
}
.fibuyrt{
height: 40px;
width: 300px;
background-color: orange;
border: none;
cursor: pointer;
color: white;
font-size: 16px;
box-shadow: 5px 5px 5px gray;
}
.fibuyrt:hover{
background-color: rgb(255, 193, 77);
color: black;
}
.c2ciu{
position: relative;
width: 95%;
left: 2.5%;
height: 75%;
top: 2.5%;
}
.upic{
position: absolute;
width: 130px;
height: 130px;
}
.utitle{
position: absolute;
left: 30%;
width: 70%;
height: 30px;
font-size: 22px;
font-weight: bold;
text-align: left;
}
.umanuf{
position: absolute;
left: 30%;
top: 30px;
width: 50%;
height: 20px;
font-size: 15px;
font-weight: normal;
text-align: left;
}
.usdesc{
position: absolute;
left: 30%;
top: 50px;
width: 50%;
height: 70px;
font-size: 22px;
font-weight: normal;
text-align: left;
color: gray;
}
.uprice{
position: absolute;
left: 80%;
top: 40px;
width: 20%;
height: 40px;
font-size: 30px;
font-weight: bold;
text-align: center;
color: orange;
}
.ubuy{
position: absolute;
left: 80%;
top: 80px;
width: 20%;
height: 30px;
}
.dsep1{
position: absolute;
left: 0;
width: 25%;
height: 50%;
font-size: 13px;
font-weight: bold;
text-align: center;
color: gray;
}
.dsep2{
position: absolute;
left: 25%;
width: 25%;
height: 50%;
font-size: 13px;
font-weight: bold;
text-align: center;
color: gray;
}
.dsep3{
position: absolute;
left: 50%;
width: 25%;
height: 50%;
font-size: 13px;
font-weight: bold;
text-align: center;
color: gray;
}
.dsep11{
position: absolute;
left: 0;
width: 25%;
top:50%;
height: 50%;
font-size: 13px;
font-weight: normal;
text-align: center;
color: black;
}
.dsep21{
position: absolute;
left: 25%;
width: 25%;
top: 50%;
height: 50%;
font-size: 13px;
font-weight: normal;
text-align: center;
color: black;
}
.dsep31{
position: absolute;
left: 50%;
width: 25%;
Top: 50%;
height: 50%;
font-size: 13px;
font-weight: normal;
text-align: center;
color: black;
}
.c2cid{
position: relative;
width: 95%;
left: 2.5%;
height: 20%;
}
#filterbar{
position: relative;
width: 100%;
height: 120px;
background-color: rgba(255, 166, 0, 0.137);
display: none;
animation: fortschritt 0.5s ease-in;
}
@keyframes fortschritt {
from {
opacity: 0
}
to {
opacity: 1
}
}
#filterst{
position: absolute;
width: 20%;
left: 5%;
height: 120px;
}
#fstlabel{
position: absolute;
width: 100%;
height: 15px;
font-size: 13px;
font-weight: bold;
}
#flalabel{
position: absolute;
width: 100%;
height: 15px;
font-size: 13px;
font-weight: bold;
}
#flacontainer{
position: relative;
width: 96%;
top: 20px;
height: 90px;
left: 2%;
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 15px;
}
#fstcontainer{
position: relative;
width: 96%;
top: 20px;
height: 90px;
left: 2%;
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 15px;
}
.fstflexitem{
flex-direction: column;
width: 100%;
text-align: left;
}
.flaflexitem{
flex-direction: row;
width: 30%;
height: 20px;
text-align: left;
}
#filterla{
position: absolute;
width: 35%;
left: 28%;
height: 120px;
}
#filterchange{
position: absolute;
width: 100px;
top: 20px;
left: 60%;
height: 20px;
}
#sortlabel{
position: absolute;
width: 11%;
top: 100px;
left: 67%;
height: 20px;
text-align: right;
font-weight: bold;
font-size: 13px;
}
#sortprice{
position: absolute;
width: 10%;
top: 100px;
left: 78.5%;
height: 20px;
text-align: center;
}
#sortrelevance{
position: absolute;
width: 10%;
top: 100px;
left: 89%;
height: 20px;
text-align: center;
}
.sortbut{
width: 100%;
height: 100%;
cursor: pointer;
border: none;
background: none;
}
.filterch{
height: 100%;
width: 100%;
background-color: orange;
border: none;
cursor: pointer;
color: white;
font-size: 13px;
box-shadow: 5px 5px 5px gray;
}
.filterch:hover{
background-color: rgb(255, 193, 77);
color: black;
}
#choosebar{
position: relative;
width: 100%;
height: 100px;
text-align: center;
}
#choosebarm{
position: absolute;
top: 20px;
width: 5%;
left: 47.5%;
height: 20px;
font-weight: bold;
}
#choosebarl{
position: absolute;
top: 20px;
width: 5%;
left: 42%;
height: 20px;
font-weight: bold;
}
#choosebarr{
position: absolute;
top: 20px;
width: 5%;
left: 53%;
height: 20px;
font-weight: bold;
}
.choosebut{
width: 100%;
height: 20px;
border: none;
background: none;
cursor: pointer;
font-weight: bold;
}
#dpicture{
position: relative;
width: 100%;
text-align: center;
height: 250px;
}
#ddescription{
position: relative;
width: 100%;
text-align: center;
height: auto;
}
#dinfos{
position: relative;
width: 100%;
height: auto;
}
#dinfosinner{
position: relative;
width: 100%;
height: 50px;
font-weight: bold;
font-size: 16px;
color: gray;
text-align: center;
}
#diil{
position: absolute;
top: 50%;
left: 0;
width: 33%;
}
#diim{
position: absolute;
top: 50%;
left: 33%;
width: 33%;
}
#diir{
position: absolute;
top: 50%;
right: 0;
width: 33%;
}
#dinfosinner2{
position: relative;
width: 100%;
height: 30px;
text-align: center;
font-size: 16px;
}
#dii2l{
position: absolute;
left: 0;
width: 33%;
}
#dii2m{
position: absolute;
left: 33%;
width: 33%;
}
#dii2r{
position: absolute;
right: 0;
width: 33%;
}
#dbackbutton{
position: absolute;
right: 0px;
width: 100px;
}
#furtherinfos{
position: relative;
width: 100%;
height: 850px;
}
#innerbackg{
position: absolute;
top: 140px;
width: 80%;
height: 600px;
left:10%;
background-color: rgba(255, 166, 0, 0.137);
}
#fiprice{
position: absolute;
top: 50px;
left: 33.333%;
width: 33.333%;
height: 80px;
text-align: center;
font-size: 45px;
color: orange;
font-weight: bold;
}
#fiamount{
position: absolute;
top: 75px;
left: 33.333%;
width: 33.333%;
height: 80px;
text-align: center;
font-weight: bold;
font-size: 23px;
}
#fiamountnr{
width: 60%;
height: 20px;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: #F2F2F2;
}
#ficost{
position: absolute;
top: 250px;
width: 50%;
left: 25%;
height: 150px;
}
#fict{
position: absolute;
width: 100%;
height: 30px;
text-align: center;
font-weight: bold;
font-size: 23px;
}
#ficm{
position: absolute;
width: 100%;
height: 40px;
top: 40px;
text-align: center;
font-size: 15px;
font-weight: bold;
}
#ficm2{
position: absolute;
width: 100%;
height: 30px;
top: 80px;
text-align: center;
font-size: 15px;
}
#ficd{
position: absolute;
width: 100%;
height: 40px;
top: 110px;
text-align: center;
font-size: 15px;
font-weight: bold;
}
#ficd2{
position: absolute;
width: 100%;
height: 30px;
top: 150px;
text-align: center;
font-size: 15px;
}
#fisubmit{
position: absolute;
top: 470px;
width: 40%;
left: 30%;
}
.fibuy2{
height: 80px;
width: 100%;
background-color: orange;
border: none;
cursor: pointer;
color: white;
font-size: 16px;
box-shadow: 5px 5px 5px gray;
}
.fibuy2:hover{
background-color: rgb(255, 193, 77);
color: black;
}
#reg{
position: relative;
width: 100%;
height: 900px;
text-align: center;
background-color: rgba(255, 166, 0, 0.137);
}
/*#reg input[type=text], input[type=email], input[type=number], input[type=password]{
width: 30%;
height: 20px;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: #F2F2F2;
}*/
#regland{
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
width: 37.3%;
height: 47px;
padding: 12px 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: #F2F2F2;
}
#reg1{
position: relative;
width: 100%;
height: 30px;
text-align: center;
font-weight: bold;
font-size: 20px;
}
#reg2{
position: relative;
left: 42%;
width: 40%;
height: 60px;
text-align: left;
font-weight: normal;
font-size: 17px;
}
#reg3{
position: relative;
left: 42%;
width: 40%;
height: 40px;
text-align: left;
font-weight: normal;
font-size: 17px;
}
#reg4{
position: relative;
top: 50px;
width: 100%;
height: 50px;
}
#reg5{
position: absolute;
text-align: right;
width: 49.8%;
left:0;
height: 100%;
}
#reg6{
position: absolute;
width: 49.8%;
right:0;
height: 100%;
text-align: left;
}
#reg7{
position: relative;
top: 50px;
width: 100%;
height: 50px;
}
#reg8{
position: absolute;
text-align: right;
width: 49.8%;
left:0;
height: 100%;
}
#reg9{
position: absolute;
width: 49.8%;
right:0;
height: 100%;
text-align: left;
}
#reg10{
position: relative;
top: 50px;
width: 100%;
height: 50px;
}
#reg11{
position: absolute;
text-align: right;
width: 49.8%;
left:0;
height: 100%;
}
#reg12{
position: absolute;
width: 49.8%;
right:0;
height: 100%;
text-align: left;
}
#reg101{
position: relative;
top: 50px;
width: 100%;
height: 50px;
}
#reg111{
position: absolute;
text-align: right;
width: 49.8%;
left:0;
height: 100%;
}
#reg121{
position: absolute;
width: 49.8%;
right:0;
height: 100%;
text-align: left;
}
#reg13{
position: relative;
top: 50px;
width: 100%;
height: 50px;
}
#reg14{
position: absolute;
text-align: right;
width: 49.8%;
left:0;
height: 100%;
}
#reg15{
position: absolute;
width: 49.8%;
right:0;
height: 100%;
text-align: left;
}
#reg16{
position: relative;
top: 50px;
width: 100%;
height: 50px;
}
#reg17{
position: absolute;
text-align: right;
width: 49.8%;
left:0;
height: 100%;
}
#reg18{
position: absolute;
width: 49.8%;
right:0;
height: 100%;
text-align: left;
}
#reg19{
position: relative;
top: 80px;
width: 100%;
height: 40px;
font-size: 15px;
}
#reg19 a{
color: orange;
font-weight: bold;
text-decoration: none;
}
#reg19 a:hover{
color: black;
}
#reg20reg{
position: relative;
top: 100px;
width: 100%;
height: 200px;
display: none;
}
#reg20buy{
position: relative;
display: block;
top: 100px;
width: 100%;
height: 300px;
}
.regradio:hover{
cursor: pointer;
}
.regradio:checked:after{
width: 10px;
height: 10px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
content: '';
background-color: #ffa500;
display: inline-block;
visibility: visible;
border: 2px solid white;
}
.contentcontainer{
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 15px;
}
.ccflexitem{
flex-direction: column;
width: 280px;
height: 280px;
box-shadow: 10px 5px 5px gray;
margin: .5em;
padding: .5em;
background-color: rgba(255, 166, 0, 0.26);
text-align: center;
}
.ccfibutton{
width: 100%;
height: 100%;
border: none;
background: none;
}
.ccfibutton:hover{
cursor: pointer;
}
#picbay{
position: relative;
width: 100%;
height: auto;
}
#piccontainer{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.picel{
width: 320px;
height: auto;
}
.picelinner{
position: relative;
left: 2%;
width: 96%;
top: 2%;
height: 96%;
}
#footer {
position: relative;
width: 100%;
height: 340px;
background-color: black;
color: white;
}
#f1{
position: relative;
width: 80%;
left: 10%;
height: 320px;
text-align: center;
font-size: 15px;
}
#f1 ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#f2{
position: relative;
width: 80%;
left: 10%;
height: 18px;
text-align: center;
font-size: 10px;
}
#f1 ul li a{
text-decoration: none;
color: white;
font-size: 13px;
}
#c2cform{
position: relative;
width: 100%;
height: auto;
text-align: center;
}
.inputstyle1{
width: 30%;
height: 20px;
padding: 12px 20px;
margin-top: 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: #F2F2F2;
min-width: 300px;
}
#inputtext{
width: 30%;
height: 200px;
padding: 12px 20px;
margin-top: 20px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: #F2F2F2;
min-width: 300px;
}
.inputsubmit{
height: 40px;
margin-top: 20px;
width: 33%;
background-color: rgba(255,128,0,255);
border: none;
cursor: pointer;
color: black;
font-size: 16px;
box-shadow: 5px 5px 5px gray;
min-width: 300px;
}
.serviceicon{
width: 300px;
height: 300px;
background-color: rgba(61,168,52,255);
text-align: center;
font-family: 'Source Sans Pro', sans-serif;
font-weight: bold;
font-size: 20px;
color: white;
margin-bottom: 30px;
}
.si_n{
position: relative;
width: 90%;
left: 5%;
height: 90%;
top: 5%;
background-color: none;
display: block;
}
.si_u{
position: relative;
width: 90%;
left: 5%;
height: 90%;
top: 5%;
background-color: none;
display: none;
}
.serviceicon:hover + .si_u{
display: block;
}
.si-icon{
position: relative;
width: 100%;
height: 70%;
}
.si-desc{
position: relative;
width: 100%;
height: 30%;
font-size: 16px;
}
.si-text{
position: relative;
width: 100%;
height: 100%;
font-size: 16px;
font-weight: normal
}
.sicontainer{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}