body{
line-height: 1.5;
font-family: sans-serif;
max-width: 100%;
}
*{
box-sizing: border-box;
margin:0;
}
.second{
width: 100%;
height: 42px;
background-color:#0789da;
display: flex;
align-items: center;
color: rgb(255, 255, 255);
overflow: hidden;
}
.second ul{
align-items: center;
list-style: none;
display: flex;
justify-content: center;
}
.second span{
font-size: 15px;
}
.second-1 div i{
font-size: 20px;
cursor: pointer;
border: 1px solid transparent;
border-radius: 3px;
}
.second li{
padding: 5px 10px;
font-size: 15px;
margin: 7px 0;
cursor: pointer;
border: 1px solid transparent;
border-radius: 3px;
}
.second-1{
flex: 0.06;
display: flex;
justify-content: center;
align-items: center;
}
.second-1 div{
display: flex;
align-items: center;
padding: 5px;
}
.second-2{
display: flex;
flex: 0.74;
justify-content: center;
align-items: center;
}
.second-2 li a{
color: #fff;
text-decoration: none;
font-size: 20px;
}
.second-3{
flex:0.2;
display: flex;
justify-content: flex-end;
margin-right: 20px;
overflow: hidden;
}
.second-3 span{
padding: 5px 10px;
cursor: pointer;
border: 1px solid transparent;
border-radius: 3px;
font-size: 20px;
text-decoration: none;
color: white;
}
.second-3 a{
text-decoration: none;
}
.second-1 div span{
padding: 5px;
cursor: pointer;
font-size: 20px;
}
.second-1 div:hover{
border: 1px solid white;
}
.second-2 li:hover{
border: 1px solid white;
}
.second-3 span:hover{
border: 1px solid white;
}
.imagen{
height: 200px;
width: 100%;
background-color: #000000;
}
.imagen .logo{
height: 600px;
width: 700px;
}
.text-p{
background-color: black;
}
.text-p p{
justify-content: center;
color: #ffffff;
display: flex;
font-size: 20px;
}
.box-2 a{
color: #ffffff;
font-size: 27px;
font-weight: bold;
margin: 5px;
height: 75px;
text-decoration: none;
justify-content:center;
align-items: center;
text-decoration:solid 5px rgb(1, 1, 1);
display: flex;
border-radius: 10px;
border-width: 5px;
border-left: 3px solid rgb(0, 0, 0);
border-right: 3px solid rgb(0, 0, 0);
border-top: 3px solid rgb(0, 0, 0);
border-bottom: 3px solid rgb(0, 0, 0);
width: 200px;
}
.box-2{
display: flex;
column-gap: 230px;
justify-content: center;
background-color: #828282;
}
.color a{
background-color: #d107dc;
}
.color a:hover{
background-color:#0310ff;
}
.box-a{
display: flex;
margin-top: solid 5px blue;
width: 100%;
justify-content:left;
margin-top: 0px;
margin-left: 1px;
justify-content: center;
background-color: #5a5a5a;
}
.box-a img{
display: flex;
justify-content:left;
margin: 0 2px;
width: 100%;
cursor: pointer;
height: 100%;
}
.con p{
justify-content: center;
display: flex;
color: #040a10;
font-size: 25px;
font-weight: bold;
}
img{
max-width: 100%;
vertical-align: middle;
}
.row{
display: flex;
flex-wrap: wrap;
}
.container{
max-width: 1170px;
margin:auto;
}
.flip-main{
min-height: 100vh;
background-color: #000000;
padding: 100px 0;
display: flex;
flex-direction: column;
column-gap: 0px;
}
.flip-main .flip-card{
flex:0 0 calc(33.33% - 30px);
margin:0 15px 30px;
perspective: 1000px; /*remove this if you dont want the 3d effect*/
}
.flip-main .flip-card-inner{
box-shadow: 0 0 10px #ffffff;
position: relative;
transform-style: preserve-3d;
transition: all 1s ease;
}
.flip-main .flip-card-front img{
width: 100%;
}
.flip-main .flip-card-front,
.flip-main .flip-card-back{
backface-visibility: hidden;
}
.flip-main .flip-card-back{
background-color: #41adff;
position: absolute;
left:0;
top:0;
padding: 15px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transform: rotateY(180deg);
}
.flip-main .flip-card-back h3{
font-size: 24px;
color: #1700af;
margin:0 0 5px;
}
.flip-main .flip-card-back h4{
font-size: 24px;
color: #a80094;
margin:0 0 5px;
}
.flip-main .flip-card-back p{
font-size: 16px;
color: #000000;
margin:0;
}
.flip-main .flip-card:hover .flip-card-inner{
transform: rotateY(180deg);
}
/*responsive*/
@media(max-width: 991px){
.flip-main .flip-card {
flex: 0 0 calc(50% - 30px);
}
}
@media(max-width: 767px){
.flip-main .flip-card {
flex: 0 0 calc(100% - 30px);
}
}
.text h3{
color:aqua;
}
.copy{
background-color: #5f5f5f;
color: #ffffff;
height:50px;
padding: 10px;
text-align: center;
}
.line{
height: 4px;
width: 100%;
background-color: black;
}
.footer{
width: 100%;
height: 20px;
}
.media {
flex: 0.06;
display: flex;
justify-content:left;
flex-direction: row;
column-gap: 25px;
background-color: #ffffff;
height: 70px;
width: 100%;
}
.media div{
display: flex;
align-items: center;
padding: 5px;
}
.media ul{
display: flex;
}
section .footer .media .mail ul{
justify-content: right;
display: flex;
align-items: center;
}
section .footer .mail ul{
justify-content: right;
display: flex;
}
.use{
justify-content: center;
display: flex;
font-size: 25px;
color: #000000;
background-color: rgb(8, 193, 255);
}
.video {
justify-content: center;
display: flex;
background-color:rgb(0, 8, 31);
}
.vs p{
background-color: #002133;
color: white;
padding: 13px;
}
.vs h2{
color:white;
background-color: #0789da;
justify-content: center;
display: flex;
margin: 2px;
}
.vs a{
color: rgb(90, 243, 254);
text-decoration:none;
font-weight: bold;
}
.vs a:hover{
color: rgb(21, 255, 0);
text-decoration: underline;
}
.tips h2{
background-color: #006cbe;
color: white;
display: flex;
justify-content: center;
margin: 2px;
}
.tips p{
background-color: rgb(40, 0, 85);
color: white;
}
.tips a{
color: rgb(90, 243, 254);
text-decoration:none;
font-weight: bold;
padding: 13px;
}
.tips a:hover{
color: rgb(21, 255, 0);
text-decoration: underline;
}
.footer .mail ul{
justify-content: left;
color: #0086b3;
display: flex;
font-size: 18px;
}
.footer .mail ul a{
color: #040a10;
text-decoration: none;
}
#preloader{
background: #ebeff0 url(loader.gif) no-repeat center center;
height: 100vh;
width: 100%;
position: fixed;
z-index: 100;
}