html,body{
font-family: "georgia" ,sans-serif;
color: black;
background-image: url('bg-11.jpg') ;
background-repeat: repeat;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
/* background-color: #f4f2ef;
height: 100%;
width: 100%; */
/* font-family: "georgia" ,sans-serif;
color: #222; */
}
.navbar{
padding:0.8rem;
opacity: .9;
}
.T0 {
font-size: 1.7rem;
border-radius: 2%;
padding: 0.5rem;
color: white;
font-family: garamond;
background-color: #00aaae;
}
.navbar-nav li{
padding-right: 20px;
}
.nav-link{
font-size: 1.1em !important;
}
.carousel-inner img{
width: 100%;
height: 80vh;
}
.carousel-caption{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-caption h1{
font-size: 440%;
text-transform: uppercase;
font-family: georgia;
text-shadow: 1px 1px 10px #000;
}
h4,h3{
font-family: georgia;
}
.carousel-caption h3{
font-size: 200%;
font-weight: 500;
text-shadow:1px 1px 10px #000;
padding-bottom: 1rem;
}
.btn-primary{
background-color: #a6b4a8;
border: 1px solid #a6b4a8;
transition: 1s all ease-out;
}
.btn-primary:hover{
background-color: #a6b4a8;
border: 1px solid #a6b4a8;
transform: scale(1.1);
}
.btn-info{
transition: 1s all ease-out;
}
.btn-info:hover{
transform: scale(1.1);
}
.jumbotron{
padding: 0.8rem;
border-radius: 0%;
}
.lead{
position: relative;
transition: .5s all ease-in;
animation: harak 3S ;
}
.padding{
padding-bottom: 1rem;
}
.fa-book{
color:#e54d26;
}
.fa-hdd{
color:#563d7c;
}
.fa-internet-explorer{
color:#2163af;
}
.fa-hdd,.fa-book,.fa-internet-explorer{
font-size: 4em;
margin: 1rem;
}
.social a{
font-size: 4.5rem;
padding: 3rem;
}
.lham{
position: relative;
border-top: 1px solid rgb(233, 240, 253);
border-bottom: 1px solid rgb(233, 240, 253);
margin: 10px auto;
transition: .3s all ease-in;
animation: harak 3S ;
background-image: linear-gradient(to right top, #f7f9f9, #e4eff3, #d7e4f0, #d2d6eb, #d6c6e0ce);
}
.lhamm{
position: relative;
background-color: rgba(161, 220, 250, 0.185);
border-radius: 10px;
transition: .3s all ease-in;
animation: harak 3S ;
}
.btnp{
display: inline-block;
border-radius: 10px;
background-color: white;
color: #00A2F0;
padding: 0.5REM 1.2rem;
margin: 10px;
transition: .3s all ease-in-out;
}
.btnp:hover{
text-decoration: none;
color: white;
background-color: #1EE8B3;
transform:scaleX(1.05);
}
.btnpp{
display: inline-block;
border-radius: 10px;
background-color: #00A2F0;
color: white;
padding: 0.5REM 1rem;
transition: .3s all ease-in-out;
}
.btnpp:hover{
text-decoration: none;
color: white;
background-color: #1EE8B3;
transform:scaleX(1.05);
}
.fa-facebook{
color:#3b5998;
transition: .3s all ease-in;
}
.fa-instagram{
color: #fbad50;
transition: .5s all ease-in;
}
.fa-youtube{
color: #bb0000;
transition: .5s all ease-in;
}
.fa-facebook:hover,.fa-instagram:hover,.fa-youtube:hover{
color: rgb(136, 125, 125);
}
.fa-medium-m{
font-size: 2rem;
}
hr.light{
border-top: 1px solid #d5d5d5;
width: 75%;
margin-top: .8rem;
margin-bottom: 1rem;
}
.card-img-top{
width: 100%;
height: 40vh;
transition: .5s all ease-in;
}
.card-img-top:hover{
opacity: .7;
}
.chokoko{
text-decoration: none;
color: #000;
}
.chokoko:hover{
text-decoration: none;
color: #000 ;
}
a div{
text-decoration: none;
color: #000;
}
a:hover{
text-decoration: none;
color: #000;
}
.card-title{
text-decoration: none;
color: #000;
}
.card{
/* box-shadow: 1PX 1PX 4PX black; */
background-color: rgba(255, 255, 255, 0.719);
transition: .3s all ease-in;
animation: harak 3S ;
color: #000;
}
.card:hover{
transform: scale(1.02);
border: 1px black solid;
overflow: hidden;
}
.btn-outline-secondary{
padding:0PX 15px 0PX 15PX;
margin: auto;
transition: .5s all ease-in;
padding: 6px 10px;
}
.btn-outline-secondary:hover{
transform: scale(1.1);
border-radius: 10%;
}
@media(max-width:1055px){
.social a{
font-size: 4em;
padding: 2rem;
}
.carousel-caption h1{
font-size: 400% ;
}
h4{
font-size: 18px;
}
body{
font-size: 15px;
}
.card{
height: 87vh;
}
}
@media(max-width:980px){
.social a{
font-size: 4em;
padding: 2rem;
}
.carousel-caption h1{
font-size: 400% ;
}
h4{
font-size: 15px;
}
body{
font-size: 14px;
}
.card{
height: 87vh;
}
}
@media(max-width:700px){
.card{
height: auto;
}
.carousel-inner img{
height: 45vh;
}
.carousel-inner{
height: 45vh !important;
}
.carousel-caption{
position: absolute;
top: 40%;
}
.carousel-caption h1{
font-size:215%;
margin:auto ;
}
.social a{
font-size: 3rem;
padding: 0.7rem;
}
.jumbotron{
font-size: 14px;
padding: 0rem;
}
.btnp{
padding: 0.3rem;
font-size:10.5px;
}
.btnpp{
padding: 0.3rem;
font-size: 10.5px;
}
.carousel-caption h3{
font-size: 110%;
}
.carousel-caption .btn{
font-size: 90%;
padding: 4px 8px;
}
.CARousel-indicators{
display: none;
}
.carousel-item{
transition:transform 0.4s ease;
backface-visibility: visible;
-webkit-backface-visibility: visible;
}
figure{
position: relative;
width: 100%;
height: 60%;
margin: 0 !important;
}
.fixed-wrap{
clip:rect(0, auto,auto,0);
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}
#fixed{
background-image: url("img/yy.png");
background-size: cover;
position:fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
transform: translateZ(0);
will-change: transform;
}
[class*="col-"]{
padding: 1rem;
}
}
@keyframes harak {
/* 0% { opacity: 0; }
100% { opacity: 1; }
*/
from{ top: 100px; left: 0px; }
to{ top: 0; left: 0; }
}
/*fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooter*/
footer{
background-color: #0f0f20;
color: #d5d5d5;
padding-top: 2rem;
}
.linf{
text-decoration: none;
color: white;
transition: .5s all ease-in-out;
display: block;
}
.linf:hover{
color: white;
text-shadow: 1PX 1PX 2PX white;
}
.MWL{
margin-bottom: 0%;
}
hr{
color: rgb(168, 211, 236);
}
.toll{
height: 11rem;
}
/*fooooooooooooooooooooooooooter*/
h2{
font-size:25px;
}