/*02-06-24*/
:root{
    --opacity1:1;
    --brandColor1: rgba(28,192,172,var(--opacity1));
    --brandColor1Hover: rgba(28,192,172,.721);
    --brandColor1Hex: /*#11c0ac*/white;
    --brandColor2: rgba(65,28,77,1);
    --brandColor2G: rgba(65,28,77,.91);
    --brandColor2Hover: rgba(65,28,77,.821);
    --brandColor2Hex: #411c4d;
    --brandColorsGradient: linear-gradient(to right, rgba(65,28,77,.07120), rgba(28,192,172,.075));
    --additiveColor1: white;
    --additiveColor2: whitesmoke;
    --bgImage1: /*"teamwork-mikael-blomkvist.png"*/;
}

*{padding: 0; margin: 0; float: left; position: relative; box-sizing: border-box; display: 0; text-decoration: none; list-style-type: none;}
b,i,em,strong,span{float: none;}

.boldColor{color: var(--brandColor2);}

h1{font-size: 32pt;}
h2{font-size:33pt;}
h3{font-size: 24pt;}
p,ul{font-size: ; font-family:sans-serif;}
a{font-size: 16pt;}
address{font-size: 13pt; font-family: sans-serif;}
form label, form button{font-size: 13pt;}
form input, form textarea{font-size: 12pt;}
form input::placeholder, form textarea::placeholder,form input:placeholder, form textarea:placeholder{font-size: 12pt;}

.section{width: 100vw; min-height: 400px;}

/*----------header code starts here--------------*/
.header{width: 100vw; max-height: 150px; padding: 0px; background-color: transparent; position:fixed; top:0; z-index:20;}
#emLogo{width: 60px; height: auto; margin: 5px 10px 0px 0px; }
.header hgroup{min-width: 320px; min-height: 50px; margin: 0px 10px 10px 10px; padding-top: 5px;}

.header hgroup a h1{text-decoration: none;  color:white;}

#topNav{margin: 5px 10px 0px 0px; float: right; color:white;}
#topNav #dropNav{min-width: 120px; max-width: 160px; height: 50px; margin: 0px 5px; background-color: ; display: flex; flex-direction: column; align-items: center;}
#topNav a{width: 120px; height: 50px; margin: 0px 5px; 
    display: flex; flex-direction: row; justify-content: center; align-items: center;
    color: var(--additiveColor2);
}
#dropNav ul a{width: 180px; height: 60px;}
#dropNavlis{display: none; position: absolute; top: 50px; background-color: ; z-index: 9; padding: 8px 0px;}
#dropNavlis a{margin: 2.5px 0; text-align: center; background-color: var(--brandColor2Hex); font-size: 12.5pt;}
#dropNavlis a:hover{border-bottom: 1px solid var(--additiveColor1);  background-color: var(--brandColor2Hover);}
#dropNav:hover #dropNavlis{display: block;}
.top-li a{color:white; font-family: serif;}
.white-bottom:hover{border-bottom: 5px solid var(--additiveColor1);}
.purple-bottom:hover{border-bottom: 5px solid var(--brandColor2Hex);}
/*----------header code ends here--------------*/

/*----------landing section code ends here--------------*/
#landing{
    height:550px;
    color: var(--additiveColor2); 
    display: flex; flex-direction: column; justify-content: center;
    background-image: url(../imgs/technology-6701406_1920.jpg); background-size: cover; background-position: center center;}
#landing-filter{
    width: 100vw; min-height: 550px; height: 100%; background-color: rgba(0,0,0,.000000196);
    display: flex; flex-direction: column; align-items: center; justify-content: center; color: #411c4d;}

#landing-text{padding:15px; max-width: 1280px; background-color:rgba(255,255,255,.675); display: flex; flex-direction: column; align-items: center; justify-content: center; top:-20px; text-align: center; text-shadow: -1.25px -1.25px 3.5px #fff;} 
#landing-h2{min-width: ; max-width: ; margin: 0px 0px 10px 0px; text-transform: uppercase;}
#small{float:none; font-size: 28pt;}
#landing-p{min-width: ; max-width: 620px; text-align:center; font-style:italic;}
/*----------landing section ends here--------------*/

/*----------about section starts here--------------*/
#about{min-height: 100px; padding: 50px 80px; text-align:center; background-color: whitesmoke; background-image:(--brandColorsGradient); display: flex; flex-direction: column; align-items: center; justify-content: center;}
#about h3,#about p{clear:both;}
#about p{margin:10px;}
/*----------about section ends here--------------*/

/*----------services section starts here--------------*/
#services{background-color: var(--additiveColor1); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}

#services input{display: none;}

.service{width: calc(50% - 0px); min-width: 380px; height: 520px; padding: 20px 0px; margin: 0px; background-color: var(--brandColorHx); border: 10px solid whitesmoke; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}

.service-card{ border: 0px solid red;
    width: 75%; height: 100%; min-width: 360px; 
    background-color: var(--brandColor1Hex); 
    transform-style: preserve-3d; transition-duration: 1.86s; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.service-front{
    max-width: 100%; height: 100%; background-color: white; background-image: var(--brandColorsGradient); position: absolute; top: 0; backface-visibility: hidden;
}
.service-back{max-width: 100%; height: 100%; background-color: white; background-image: var(--brandColorsGradient); position: absolute; top: 0; transform: rotateY(180deg); backface-visibility: hidden;}

.service hgroup{
    width: 100%; min-height: 100px; padding: 10px 10px; margin: 10px 0px 0px 0px; display: flex; flex-direction: row; justify-content: center;
}

.service hgroup .img{width: 100px; height: 100px; overflow: hidden;}
.service hgroup .img img{width: auto; height: 100%;}

#service1 hgroup{margin-bottom: 10px;}
#service1 hgroup .img{
    width: 100px; height: 100px; background-color: red; overflow: hidden;
}
#service1 hgroup .img img{
    width: auto; height: 100%; background-color: red; position: absolute; left: -15px;
}

.service hgroup h3{text-align:center;
    min-width: 100px; max-width: calc(100% - 150px); min-height: 100px; color: var(--brandColor2Hex); display: flex; flex-direction: row; align-items: flex-end; justify-content: center;
}

#service1 hgroup h3{
    min-width: 100px; max-width: calc(100% - 150px); min-height: 100px; padding: 0px 0px 0px 10px; color: var(--brandColor2Hex); display: flex; flex-direction: row; align-items: flex-end; justify-content: center; text-align: left;
}
.service p{width: 100%; padding: 5px 15px; margin: 5px 0px;}
.service-front .front-p{height: 100%; max-height: 250px; text-align: center; display: flex; flex-direction: column; justify-content: center;}
.service-back .p{height: 100%; max-height: 265px; padding: 0px 20px; overflow: scroll; display: inline-block;}
#service1 p{padding: 5px 30px; text-align: left;}

.services-btn{width: ; height: 50px ; padding: 10px; background-color: var(--brandColor2Hex); color: white; position: absolute; bottom: 10px; right: 10px; display: flex; flex-direction: row; justify-content: center; align-items: center;}
.services-btn:hover{background-color: var(--brandColor2Hover);
    box-shadow: 0px 0px 1px 0 rgba(80,05,80,0.752);}
.services-btn a{width: 100%; height: 100%; color: white; display: flex; flex-direction: row; justify-content: center; align-items: center;}

.services-btn{text-transform: capitalize;}
#service1 .services-btn{text-transform: capitalize;}

#services:has(#chk1:checked) #service-card1{transform: rotateY(180deg);}
#services:has(#chk2:checked) #service-card2{transform: rotateY(180deg);}
#services:has(#chk3:checked) #service-card3{transform: rotateY(180deg);}
#services:has(#chk4:checked) #service-card4{transform: rotateY(180deg);}
#services:has(#chk5:checked) #service-card5{transform: rotateY(180deg);}
#services:has(#chk6:checked) #service-card6{transform: rotateY(180deg);}

/*----------services section ends here--------------*/



/*----------contact section ends here--------------*/
#contact{min-height: 200px; background-color: var(--brandColor2Hex); color: white;
display: flex; flex-direction: column; align-items: center; padding: 50px 0px;}
#contactUs{display: flex; align-items:center; flex-direction: row;}
#cH2{width: ; padding: 10px; text-align: center; font-size: 28pt; font-weight: bold; display: block;}
#infoContact{margin-bottom: 10px;}
/*----------contact section ends here--------------*/


/*----------contact form starts here--------------*/
#showThanks{width: 390px; padding: 20px; color: white;}
#showResetForm{width: 0; height: 0; margin-top: 15px;
border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #fff;}
#clear-form{
    min-width: 50px;
    height: 50px;
    padding: 10px;
    background-color: white;
    color: purple;
    border: none;
    float:right; display:none;
}
#reset-newForm{
    width: 50px;
    height: 50px;
    font-size: 20pt;
    padding: 10px;
    background-color: white;
    color: purple;
}

#contactUs-bottom{display: none;}

#form-em{width: 390px; margin-top: 10px; padding: 20px; background-color: rgba(28,192,172, .0);}

.sr-only{/*labels*/
    min-width: 120px; width: 25%; height: 50px; 
    color: black; background-color:white ; 
    display: flex; flex-direction: row; 
    align-items: center; justify-content: center;  
    background-image: linear-gradient(to right, rgba(65,28,77,.07120), rgba(28,192,172,.075));}
.form-control{/*inputs textarea*/
    min-width: 230px; width: 75%; height: 50px; 
    padding: 10px;}
.form-group{/*label/input wrap*/
    margin-top: 10px; 
    display: flex; flex-direction: row; justify-content: center;}
.form-group-msg{/*label/input wrap*/flex-direction: column; margin-top: 0;}
.form-group-msg textarea{/*label/input wrap*/max-width: 350px; /*text area*/min-width: 350px; width:350px; min-height: 50px; margin-top: 10px; max-height: 250px;}

.anti-sr{margin-top: 10px;}
.anti-sr-label{padding-left: 10px;}

#contact-antispam-label{padding-right: 0; padding-left: 5px; width: 120.0px;
    color: black; background-color: white;
    background-image: linear-gradient(to right, rgba(65,28,77,.07120), rgba(28,192,172,.075));}

#contact-antispam-label::after{width: 70px; content: "7 + 5 ="; text-align: center; margin: 0px 25px;}
.btn{width: 350px; height: 50px; margin-top: 10px; background-color: white; background-image: linear-gradient(to right, rgba(65,28,77,.07120), rgba(28,192,172,.075));}
.btn:hover{ background-image: linear-gradient(to right, rgba(65,28,77,.2107120), rgba(28,192,172,.21075));}

/*----------contact form ends here--------------*/




/*----------footer section starts here--------------*/
footer{width: 100vw; min-height: 50px; max-height: 100px; padding: 10px; background-color: var(--additiveColor2); display: flex; flex-direction: row; align-items: center; justify-content: center;}
footer p{width: 100%; text-align: center; font-family: sans-serif; font-size: 11pt;}

/*.form-bottom form .input-error{
}*/
/*----------footer section ends here--------------*/



/*----------media queries start here--------------*/
@media only screen and (max-width: 960px) and (min-width: 641px){}
@media only screen and (max-width: 768px){
    .service-back .p{max-height: 215px;}
}
@media only screen and (max-width: 759px) and (min-width: 240px){
    .service{width: calc(100% - 20px);}
    .service-card{width: 75%; height: 100%; min-width: 360px;}
    
}
@media only screen and (max-width: 1220px) and (min-width: 615px){
    .service hgroup h3{font-size: 22pt;}    
}
@media only screen and (max-width: 474px){
    #landing-text{top:25px;}
}
@media only screen and (max-width: 414px){
    #landing-text{top:35px;}
    .header{padding-top:10px;}
    .header hgroup{min-width: 100px;}
    .header hgroup h1{font-size: 30pt;}
    .header .top-li a{color:black;}
}
@media only screen and (max-width: 614px) and (min-width: 240px){
    #landing-text{margin-top:50px;}
    .service hgroup h3{font-size: 22pt;}    
}
/*----------media queries end here--------------*/