body {
    position: static;
    margin: 0;

    height: calc(100% - 89px);

    font-size: 15px;
    font-weight: 200;
    color: #fff;

   background-color: #020E1D;
   overflow-x: hidden;
}
h1,
.h1 {
    font-size: 4rem;
}

h2,
.h2 {
    font-size: 2rem;
}

h3,
.h3 {
    font-size: 1.5rem;
}










.Site {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.Site-content {
    flex: 1;
}


.vh-100 {
    min-height: 100vh;
    bottom: 0;
}

.bottom100 {
    padding-bottom: 350px;
}

a {
    color: #fff;
}

.container-fluid {

    padding-top: 100px;
}



.navbar-dark {
    font-size: 18px;
}


.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #5698CB;
}

.navtop {
    margin-top: 60px;
}

.sol-menu {
    padding-top: 100px;
    padding-left: 15px;
    position: absolute;
    font-size: 13px;
}

.padding-top20 {
    padding-top: 20px;
}

.padding-top30 {
    padding-top: 30px;
}


.slider-div {
    width: 100%;
    height: auto;
    border-bottom-style: solid;
    border-color: #fff;
    background-position: right;
    background-repeat: no-repeat;

}



.bg-dark {
    background-color: #0C0C0C !important
}

.padding-top-100 {
    padding-top: 100px;
}

.form-control {
    border-radius: 0rem;
}

.padding-left {
    padding-left: 55px;
}


.layer1 {
    padding-left: 320px;
}


.layer2 {
    padding-left: 650px;
    padding-top: 80px;
}

.layer3 {
    padding-left: 460px;
    padding-top: 360px;
}

.layer4 {
    padding-left: 260px;
    padding-top: 360px;
}

.parallaxL1 {
    animation-name: spin2;
    animation-duration: 7000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


.parallaxL2 {
    animation-name: spin;
    animation-duration: 20000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.parallaxL3 {
    animation-name: spin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.parallaxL4 {
    animation-name: spin;
    animation-duration: 70000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}



@keyframes spin2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.opacity {
    opacity: 0.7;
}

.kutu {
    border-style: solid;
    border-width: 5px;
    border-color: #2B70B3;
}

.sag {
    padding-right: 50px;
}



.rota-e {
    transform: rotate(-30deg);
}

.rota-a {
    transform: rotate(30deg);
}

.ref-left {
    padding-left: 15%;
}

.pad-ri {
    padding-right: 6%;
}


.gen-is {
    padding-left: 8%;
}

.hex2 {
    position: relative;
    width: 250px;
    height: 144.34px;
    background: url('img/hizmetler-1.jpg');
    background-size: cover;
    margin: 72.17px 0;
    box-shadow: 0 0 10px rgba(244, 255, 254, 0);
    border-left: solid 10px #104188;
    border-right: solid 10px #104188;
}

.hex2:before,
.hex2:after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 176.78px;
    height: 176.78px;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background-color: inherit;
    left: 26.6117px;
    box-shadow: 0 0 10px rgba(244, 255, 254, 0);
}

.hex2:before {
    top: -88.3883px;
    border-top: solid 14.1421px #104188;
    border-right: solid 14.1421px #104188;
}

.hex2:after {
    bottom: -88.3883px;
    border-bottom: solid 14.1421px #104188;
    border-left: solid 14.1421px #104188;
}

/*cover up extra shadows*/
.hex2 span {
    display: block;
    position: absolute;
    top: 5.773502691896257px;
    left: 0;
    width: 230px;
    height: 132.7906px;
    z-index: 2;
    background: inherit;
}

.gen-border {

    border-left: solid 10px #104188;
    border-right: solid 10px #104188;
}







@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
    /*
    margin-left: 90px;
    margin-right: 90px;
    */
  }
}





/* HEXAGON DIV */
.hexagon_vizyon {
    background-image: url('images/vizyon.png');
}

.hexagon_misyon {
    background-image: url('images/misyon.png');
}

.hexagon_muhendislik {
    background-image: url('images/muhendislik.png');
}

.hexagon_guvenligecis {
    background-image: url('images/guvenligecis.png');
}

.hexagon_sistem {
    background-image: url('images/sistem.png');
}

.hexagon_ebys {
    background-image: url('images/ebys.png');
}

.hexagon_xsports {
    background-image: url('images/xsports.png');
}

.hexagon_sprime {
    background-image: url('images/sprime.png');
}

.hexagon_pa {
    background-image: url('images/pa.png');
}

.hexagon_f5 {
    background-image: url('images/f5.png');
}

.hexagon_quest {
    background-image: url('images/quest.png');
}

.hexagon_splunk {
    background-image: url('images/splunk.png');
}


.hexagon_avrupabirligi {
    background-image: url('images/avrupabirligi.png');
}

.hexagon_havelsan {
    background-image: url('images/havelsan.png');
}

.hexagon_trouwnutrition {
    background-image: url('images/trouwnutrition.png');
}

.hexagon_mam {
    background-image: url('images/mam.png');
}

.hexagon_armador {
    background-image: url('images/armador.png');
}

.hexagon_ideakup {
    background-image: url('images/ideakup.png');
}


.hexagon_mobil {
    background-image: url('images/mobil.png');
}
.hexagon_kamera {
    background-image: url('images/kamera.png');
}
.hexagon_geribildirim {
    background-image: url('images/geribildirim.png');
}
.hexagon_ders {
    background-image: url('images/ders.png');
}
.hexagon_webuyumlu {
    background-image: url('images/webuyumlu.png');
}
.hexagon_sms {
    background-image: url('images/sms.png');
}

.hexagon {
    position: relative;
    width: 240px;
    height: 138.56px;
    margin: 69.28px 0;
    background-size: auto 254.0341px;
    background-position: center;
    border-left: solid 10px #113a7a;
    border-right: solid 10px #113a7a;

    margin-left: 15px;
    margin-right: 15px;

    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.hexTop,
.hexBottom {
    position: absolute;
    z-index: 1;
    width: 169.71px;
    height: 169.71px;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    -ms-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    background: inherit;
    left: 25.15px;
}

/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
    content: "";
    position: absolute;
    width: 220.0000px;
    height: 127.01705922171769px;
    -webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-63.5085px);
    -ms-transform: rotate(45deg) scaleY(1.7321) translateY(-63.5085px);
    transform: rotate(45deg) scaleY(1.7321) translateY(-63.5085px);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;
}

.hexTop {
    top: -84.8528px;
    border-top: solid 14.1421px #113a7a;
    border-right: solid 14.1421px #113a7a;
}

.hexTop:after {
    background-position: center top;
}

.hexBottom {
    bottom: -84.8528px;
    border-bottom: solid 14.1421px #113a7a;
    border-left: solid 14.1421px #113a7a;
}

.hexBottom:after {
    background-position: center bottom;
}

.hexagon:after {
    content: "";
    position: absolute;
    top: 5.7735px;
    left: 0;
    width: 220.0000px;
    height: 127.0171px;
    z-index: 2;
    background: inherit;
}

.social
{
    margin-left: 5px;
    margin-right: 5px;
}

.footer1 
{    position: absolute;
    width:100%;
 }
.footer
{    position: absolute;
    bottom:0px;
    width:100%;
    z-index: 1030;
 }

@media only screen and (min-width: 481px) and (max-width: 768px) {
  .footer {
    position: static !important;
  }
}