/* Emre DÖKMETAŞ Front-End & Back-End Developer Mail : emredokmetas58@gmail.com GSM : 0 (553) 220 95 16 ZeroNET İnternet Hizmetleri 2015 */ @import url('zero-bootstrap.css'); .tind{text-indent: -999999px;} .fl{float: left;} .fr{float:right;} .fn{float: none;} .clr{clear: both;} h1,h2,h3,h4,h5,h6{padding: 0; margin: 0; font-family: 'Hind', sans-serif;} body{background: #ffffff; font-family: 'Hind', sans-serif; font-size: 13pt;} a{color: #282828;} a:hover{color:#ff4040; text-decoration: none;} .sticky{margin-top: -18px; height: 78px; border-bottom: 1px solid #dcdcdc;} #header{width: 100%; position: fixed; -webkit-transition: all 1s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease;transition: all 0.5s ease; background: #ffffff; z-index: 999;} header{width: 1160px; margin: 0 auto; height: 101px;} #logo{width: 172px; height: 43px; display: block; background: url(../images/logo.png) no-repeat; margin: 25px 0 0 0;} .social{width: 24px; height:18px; display: block; background: url(../images/social.png) no-repeat; margin:40px 0 0 5px;} .tw{margin-left:20px;} .tw:hover{background-position: 0 -18px;} .fb{background-position: -24px 0px;} .fb:hover{background-position: -24px -18px} header>nav>ul{list-style: none;} header>nav>ul>li{float:left; padding: 0 21px; margin-top:20px; } header>nav>ul>li:first-child{border-left:1px solid #dcdcdc; padding-left: 20px;} header>nav>ul>li>a{font-size:12pt; font-weight: 500; width: 100%; height: 100%; display: block; line-height: 45px; z-index: 999999; padding: 7px 0 3px 0; -webkit-transition: all 300ms ease;-moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease;transition: all 300ms ease;} header>nav>ul>li>a:hover{padding: 10px 0 0 0;} header>nav>ul>li>a.basket{width:24px; height: 39px; background: url(../images/basket.png) no-repeat center; margin-top:-3px; } header>nav>ul>li>span.badge{background: #ffe400; color:#161616; position: absolute; margin: -20px 0 0 15px;} header>nav>ul>li>a.girisKayit{width:140px; height: 39px; margin-top: 7px; background: url(../images/girisKayit.png) no-repeat; -webkit-transition: all 0ms ease; -moz-transition: all 0ms ease; -ms-transition: all 0ms ease; -o-transition: all 0ms ease; transition: all 0ms ease; } header>nav>ul>li>a.girisKayit:hover{background-position: 0 -39px;} header>nav>ul>li.basketli{border-left:1px solid #dcdcdc;border-right:1px solid #dcdcdc; padding: 8px 20px 8px 10px;} header>nav>ul>li>ul{list-style: none; position: absolute; z-index: 1; display: none; margin-left:-40px; -webkit-transition: all 1s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease;transition: all 0.5s ease;} header>nav>ul>li>ul>li>div{background: #ff4040; min-height: 250px;} header>nav>ul>li>ul>li.dropdown-head{background: #ff4040; height: 10px; margin-top:16px; } header>nav>ul>li>ul>li>div>.dropdown-left{padding: 38px 48px; width: 301px; } .dropdown-right-b{width: 535px;} .dropdown-left>h3.head{color:#ffffff; font-size:13pt; font-weight: 500; padding-bottom: 20px;} .dropdown-left>ul{list-style: none; padding: 0; margin: 0;} .dropdown-left>ul>li>a{color:#ffffff; font-weight: 300; border-bottom: 1px solid #d53030; font-size:14pt; display: block; line-height: 40px; background: url(../images/arrow.png) no-repeat right center;} .dropdown-left>ul>li>a:hover{color:#740000;} .dropdown-left>ul>li:last-child>a{border-bottom: none;} .dropdown-right{background:#e93737;padding: 38px 48px; text-align: center; } .dropdown-bottom{background:#d83535; padding: 20px 38px 12px 38px; } .dropdown-bottom>a.uyeOl{width: 151px; height: 39px; background: url(../images/hemen-uye-ol.png) no-repeat; display: block;} .dropdown-bottom>a.uyeOl:hover{background-position: 0 -39px;} .dropdown-bottom>span{font-size:16pt; color:#ffffff; font-weight: 500; line-height: 45px;} .carousel-indicators>li{background: #f1f1f1; border:1px solid #f1f1f1;} .carousel-indicators>li.active{background: #ff5555; border:1px solid #ff5555;} #domain{width: 50%; padding: 35px 20px; background: #ff4040; color:#ffffff; min-height: 190px;} .domain{width: 580px;} .domain>div>h3{font-size: 17pt; font-weight: 500; } .domain>div>a{color:#ffffff; font-weight: 500; margin-top: 5px; font-size:11pt;} .domain>div>a:hover{color: #910c0c; } .domain>span{font-size: 14pt; font-weight: 500; display: block; width: 100%; text-align: center; margin-top: 10px; } #domainText{width: 460px; border: 1px solid #ffffff; font-size:13pt; line-height: 13pt; height: 49px; padding: 10px;} #domainText:focus{background: #dcdcdc; border: 1px solid #dcdcdc; box-shadow: none;} .domain button{background: #d13a3a; border: none; font-size:13pt; padding: 12px 12px 13px 12px; color:#ffffff; font-weight: 500;} .domain button:hover{background:#c63131; } #server{width: 50%; padding: 20px 20px 20px 0; background: #68c3e1; color:#ffffff; min-height: 190px;} .server{width: 580px; line-height: 150px;} #buys{width: 1160px; margin: 0 auto;} #buys>ul{list-style: none; margin-top: -10px;} #buys>ul>li{float:left; width: 25%; padding: 35px 8px; text-align: center; border-left:1px solid #e9e9e9;} #buys>ul>li:first-child{border-left:none;} #buys>ul>li>h3{padding: 20px 0; font-weight: 500;} #buys>ul>li>figure{line-height: 80px;} #buys>ul>li>span, small{width: 100%; display: block; padding: 10px 0;} #buys>ul>li>span>strong{font-size:32pt; padding: 0 5px;} #buys>ul>li>small{font-size: 10pt; padding: 10px 0 0 0;} #buys>ul>li>.prog{height: 10px; -webkit-border-radius: 5px; border-radius: 5px; background: #e4e4e4;} #buys>ul>li>.prog>span{height: 10px; width: 0%; display: block; background: #ff5555;-webkit-border-radius: 5px; border-radius: 5px;} #buys>ul>li>.prog>span.blue{background: #55c1ff;} #buys>ul>li>.buysButton{width: 120px; height: 40px; margin: 20px auto 0 auto; border:2px solid #ff5555; -webkit-border-radius: 20px; border-radius: 20px; background: #ff5555; display: block; color:#ffffff; line-height: 40px; font-size:10pt; font-weight: 600;} #buys>ul>li>.buysButton:hover{color: #ff5555; background: #ffffff;} #twitterBand{background: #e9e9e9; padding: 50px 0; height: 332px;} .twitterBand{width: 800px; margin: 0 auto; text-align: center; font-size:16pt; font-weight: 500;} .twitterBand>img{margin-bottom: 20px;} .twitterBand .carousel-indicators{top: -40px;} .twitterBand .carousel-indicators>li{background: #d9d9d9; border:1px solid #d9d9d9;} .twitterBand .carousel-indicators>li.active{background: #55c1ff; border:1px solid #55c1ff;} .twitterBand .carousel-inner{margin-top: 50px;} .twitterBand time{color:#ff5555; font-size:12pt;} #customerBar{width: 1160px; margin: 0 auto;} #customerBar>.comment,.why{width: 50%; height: 310px; padding: 30px 10px;} #customerBar h3{margin-bottom: 20px;} .comment{border-right: 1px solid #e2e2e2;} .comments{margin-top: 50px;} .comment>div>img{-webkit-border-radius: 68px; border-radius: 68px; -webkit-transition: all 1s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;} .comment>div>img:hover{-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);} .customerComment{background: url(../images/quote.png) no-repeat top left; margin-left: 136px; } .customerComment p:first-child{text-align: justify; font-weight: 500; padding: 0 30px;} .customerComment p:last-child{text-align: right; font-weight: 500; font-size:11pt; background: url(../images/quote.png) no-repeat bottom right; padding: 0 30px;} .why>.whys{background: url(../images/why1.png) no-repeat top left; width: 50%; min-height: 210px; padding: 0 30px 0 50px;} .why>.whya{background: url(../images/why2.png) no-repeat top left; width: 50%; min-height: 210px; padding: 0 30px 0 50px;} .why>p{padding: 0; margin: 0;} .whys>p:nth-child(2), p:nth-child(3){margin-top: 25px;} .whya>p:nth-child(2), p:nth-child(3){margin-top: 25px;} #call{background: url(../images/sizi-arayalim.jpg) no-repeat center; height: 287px;} .call{width: 980px; margin: 0 auto; height: 287px;} .call>a{width: 354px; height: 59px; position: absolute; margin: 120px 0 0 623px; display: block; background: url(../images/sizi-arayalim-buton.png) no-repeat;} .call>a:hover{background-position: 0 -59px;} #happyCustomer{height: 323px; background: url(../images/mutlu-musteri.jpg) no-repeat center;} .happyCustomer{width: 1160px; margin: 0 auto;} .happyCustomer>.ref{width: 50%; padding: 60px 10px;} .happyCustomer>.ref>h3{color:#ffffff;} .refimg{line-height: 200px; text-align: center;} .refimg>img{margin: 20px; width: 120px;} .ref .carousel-indicators{top:-25px; margin-left:60px;} .ref .carousel-indicators>li{background: #ffffff; border:1px solid #ffffff;} .ref .carousel-indicators>li.active{background: #368099; border:1px solid #368099;} #partners{background: #404040 url(../images/partners1160.png) no-repeat center; height: 121px; } #footer{background: #373737; color:#858585;} #bottom{background: #2b2b2b; color:#858585; line-height: 65px;} #bottom a{color:#858585; padding: 0 5px;} #bottom a:hover{color:#ffffff;} .footer,.bottom{width: 1160px; margin: 0 auto;font-size:10pt;} .footer ul{list-style: none; margin: 0;} .footer>ul>li{width: 20%; float: left; border-right: 1px solid #4d4d4d; min-height: 162px; } .footer>ul>li:nth-child(5){border-right: none;} .footer>ul>li:nth-child(10){border-right: none;} .footer>ul>li:last-child{border-right: none;} .footer>ul>li>a{width: 100%; display: block; color:#858585; padding: 0 10px 0 20px; background: url(../images/arrow2.png) left center no-repeat;} .footer a:hover{color:#ffffff;} .footer>ul>li>h5{padding: 30px 10px 10px 10px;} .contact{padding: 0 10px 0 45px; margin-left: 10px; min-height: 40px; display: block; margin-top: 25px;} .contact:nth-child(3) , .contact:nth-child(4){line-height: 40px;} .map{background: url(../images/map.png) no-repeat left center;} .tel{background: url(../images/tel.png) no-repeat left center;} .skype{background: url(../images/skype.png) no-repeat left center; line-height: 40px;} .mail{background: url(../images/mail.png) no-repeat left center; line-height: 40px; } .mail>a{background: none; padding: 0;color:#858585;} .social2{width: 24px; height:18px; display: block; background: url(../images/social2.png) no-repeat;} .fbs{background-position: -24px 0px;} .fbs:hover{background-position: -24px -18px} .icon{width: 71px; height: 71px; position: fixed; left:0; top:250px; overflow: hidden; background: url(../images/destek-ico.png) no-repeat; z-index: 999999; cursor: pointer;-webkit-transition: all 1s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease;transition: all 0.5s ease;} .icon:nth-child(2){top:341px; background: url(../images/telefon-ico.png) no-repeat;} .icon:nth-child(1)>span{width: 167px; height: 71px; margin-left:71px; display: block; background: url(../images/destek-resim.png) no-repeat;} .icon:nth-child(2)>span{width: 167px; height: 71px; margin-left:71px; display: block; background: url(../images/telefon-resim.png) no-repeat;} .icon:hover{width: 238px;} .mobileMenu,#menuMobile{display: none;} /*Alan Adı*/ #banner{width: 100%; height: 892px; display: block; background: url(../images/alan-adi.jpg) no-repeat center; margin-top: 75px;} #alanSorgula{width: 800px; margin: 0 auto; color:#ffffff; } #alanSorgula>h2{text-align: center; padding:100px 0 75px 0;} #alanSorgula .sorgu>input{width: 605px; border: 1px solid #ffffff; font-size:13pt; line-height: 13pt; height: 49px; padding: 10px;} #alanSorgula .sorgu>input:focus{background: #dcdcdc; border: 1px solid #dcdcdc; box-shadow: none;} #alanSorgula .sorgu>button{background: #11cba6; border: none; margin:-1px 0 0 -5px; font-size:13pt; padding: 12px 12px 12px 12px; color:#ffffff; font-weight: 500; width: 195px;} #alanSorgula .sorgu>button:hover{background:#0aa788; } #alanSorgula .uzanti{margin:0 0 0 35px;} #alanSorgula .uzanti input{display: none;} #alanSorgula .uzanti .check{width: 95px; margin: 47px 0 0px 0; cursor: pointer; float: left;} #alanSorgula .uzanti .check span.checkbox-d{background: #ffffff; width: 20px; height: 20px; display: block;} #alanSorgula .uzanti .check span:nth-child(2){margin-left: 10px;} #alanSorgula .selected{margin: 50px auto 0 auto; width: 190px; display: block; text-align: center; cursor: pointer; text-decoration: underline; font-size:17pt; font-weight: 300;} #alanSorgula .selected:hover{text-decoration: none;} #orta{background: #efefef} .orta{width:1160px; margin: 0 auto; padding: 20px 0px;} .orta h1{font-size:25pt; margin-bottom: 10px; font-weight: 100; color:#282828;} .alan-genel{width: 49.5%; height: 134px; color:#282828; float: right;} .alan-genel>div:nth-child(1){background: #ffffff; text-align: center; width: 20%; border-right:1px solid #efefef; height: 124px; float: left;} .alan-genel>div:nth-child(2){padding:10px; background: #ffffff; width: 80%; height: 124px; float: left;} .alan-genel:nth-child(2),.alan-genel:nth-child(4),.alan-genel:nth-child(6){float: left;} .alan-genel h3{font-size: 16pt; font-weight: 300; padding: 10px 0 10px 0;} .alan-genel span{font-size:12pt; text-align: justify;} /*Destek Paketleri*/ #destek-banner{width: 100%; height: 476px; display: block; background: url(../images/destek-paketleri.jpg) no-repeat center; margin-top: 73px;} #destek-banner>h2{text-indent: -99999px;} #ortas{background: #ffffff} .ortas{width:1160px; margin: 0 auto; padding: 20px 0px;} .ortas h1{font-size:25pt; margin-bottom: 10px; font-weight: 100; color:#282828;} .d-genel{width: 49.5%; color:#282828; float: left; margin-bottom: 20px;} .d-genel>div:nth-child(1){background: #4bc8b4; line-height: 72px; width: 100%; font-size:18pt; color:#ffffff; padding: 0 20px; height: 72px; display: block;} .d-genel>div:nth-child(2){padding:10px; background: #ffffff; border:1px solid #efefef; width: 100%; display: block; min-height: 400px; } .d-genel:nth-child(4){float: right;} .d-genel:nth-child(3){float: left;} .d-genel:nth-child(6){float: right;} .d-genel p{font-size:11pt; display: block; padding: 0px 15px 15px 100px; margin: 15px 0 0 10px; text-align: justify; line-height: 17pt;} .bir{background: url(../images/bir.png) no-repeat;} .iki{background: url(../images/iki.png) no-repeat;} .uc{background: url(../images/uc.png) no-repeat;} .dort{background: url(../images/dort.png) no-repeat;} .bes{background: url(../images/bes.png) no-repeat;} .d-genels{width: 100%; color:#282828; margin-bottom: 20px;} .d-genels>div:nth-child(1){background: #4bc8b4; line-height: 72px; width: 100%; font-size:18pt; color:#ffffff; padding: 0 20px; height: 72px; display: block;} .d-genels>div:nth-child(2){padding:10px; background: #ffffff; border:1px solid #efefef; width: 100%; display: block; } .d-genels p{font-size:11pt; display: block; padding: 0px 15px 100px 100px; margin: 15px 0 0 10px; text-align: justify; line-height: 17pt;} #hak-banner{width: 100%; height: 476px; display: block; background: url(../images/hakkimizda.jpg) no-repeat center; margin-top: 73px;} #hak-banner>h2{text-indent: -99999px;} .hakki h1,.bankh h1{font-size:25pt; margin-bottom: 10px; font-weight: 100; color:#282828;} .hakki{margin: 20px 0; background:#ffffff; width: 80%; text-align: justify; padding-left: 20%; line-height: 24pt;} .bankh{padding: 20px 30px; width: 45%; background: #efefef;} .hak{list-style: none; margin: 0; padding: 0; min-height: 1000px;} .hak>li{margin-bottom: 40px; font-size: 11pt; color:#282828;} .bankh h4{padding: 15px 0;} #soz-banner{width: 100%; height: 476px; display: block; background: url(../images/sozlesme.jpg) no-repeat center; margin-top: 73px;} #soz-banner>h2{text-indent: -99999px;} .soz{text-align: justify;} #map{width: 100%; height: 476px; display: block; background: #ffffff; margin-top: 73px;} .lihe img{border:20px solid #efefef;} .lihe p{line-height: 14pt; font-size: 10pt; padding: 0; margin: 0; color:#282828;} .lihe button{background: #46bcec; padding: 8px; border: none; color:#ffffff; margin: 20px auto; font-weight: 500; border-radius: 30px;} .lihe button:hover{color:#176484;} #insan-banner{width: 100%; height: 476px; display: block; background: url(../images/insan-kay.jpg) no-repeat center; margin-top: 73px;} #insan-banner>h2{text-indent: -99999px;} .insan p{font-size: 11pt; padding:5px 0; margin: 5px 0; line-height: 15pt; color: #282828;} .insan p a{color:#ff3b3b; font-weight: 500;} .insan p a:hover{color:#282828;} .insan ol{font-size: 11pt; color:#2f87c4;} #tr-banner{width: 100%; height: 476px; display: block; background: url(../images/tr-alan-adi.jpg) no-repeat center; margin-top: 73px;} #tr-banner>h2{text-indent: -99999px;} #cloud-banner{width: 100%; height: 476px; display: block; background: url(../images/cloud-banner.jpg) no-repeat center; margin-top: 73px;} #cloud-banner>h2{text-indent: -99999px;} .acikver{padding: 30px 0;} .birimMor{background: #6c1da7;} .birim{padding: 7px; font-size: 12pt; border-radius: 30px; font-weight: 500; color: #ffffff;} .dortp>td{width: 25%; padding: 0; vert-align: top; vertical-align: top; color: #282828;} .Mor{background: #9f45de; color: #ffffff;} .Mor>span.cloud{background:#8a33c7 url(../images/cloud-ico.png) no-repeat center; float: right; display: block; height: 70px; width: 70px; text-indent: -9999px;} .ths>div:nth-child(1){padding: 10px 0 8px 10px; float: left;} .ths>div:nth-child(1)>h3{font-size: 16pt;} .ths>div:nth-child(1)>span{font-size: 8pt;} .pks{border: 1px solid #eaeaea; padding: 20px;} .pks>ul,.pks>ul>li{padding: 0; margin: 0; list-style: none; font-size: 10pt;} .pks>ul>li{padding: 5px 0 5px 30px;} .prc{border-left:1px solid #eaeaea; border-right:1px solid #eaeaea;} .prc>div.fifty{padding:10px 0; width: 50%; float: left;} .prc>div.fifty:nth-child(1){border-right:1px solid #eaeaea;} .prc>div.fifty>span{display: block; width: 100%; text-align: center; font-size: 12pt;} .prc>div.fifty>strong{display: block; width: 100%; margin-top: -10px; text-align: center; font-size: 26pt;} .prc>div.fifty>strong>b{font-size: 14pt;} .prc>div.fifty>small{display: block; width: 100%; text-align: center; margin-top: -20px; font-size: 7pt;} .sinirsiz{background: url(../images/paket-sinirsiz.png) no-repeat left; } .spam{background: url(../images/paket-spam.png) no-repeat left; } .anti{background: url(../images/paket-anti.png) no-repeat left; } .mailz{background: url(../images/paket-mail.png) no-repeat left; } .adet{background: url(../images/paket-adet.png) no-repeat left; } .trafik{background: url(../images/trafik.png) no-repeat left; } .ip{background: url(../images/paket-ip.png) no-repeat left; } .kvm{background: url(../images/paket-kvm.png) no-repeat left; } .cloud-net{background: url(../images/paket-cloud.png) no-repeat left; } .marker{background: url(../images/marker.png) no-repeat left; } .disk{background: url(../images/disk.png) no-repeat left; } .sql{background: url(../images/sql.png) no-repeat left; } .saat{background: url(../images/saat.png) no-repeat left; } .cloudflare{background: url(../images/cloudflare.png) no-repeat left; } .islemci{background: url(../images/islemci.png) no-repeat left; } .ram{background: url(../images/ram.png) no-repeat left; } .veveve{background: url(../images/veve.png) no-repeat left; } .user{background: url(../images/user.png) no-repeat left; } .engel{background: url(../images/engel.png) no-repeat left; } .caldav{background: url(../images/caldav.png) no-repeat left; } .pop{background: url(../images/pop.png) no-repeat left; } .out{background: url(../images/out.png) no-repeat left; } .mobila{background: url(../images/mobile.png) no-repeat left; } .takvim{background: url(../images/takvim.png) no-repeat left; } .basket-p{border:1px solid #eaeaea; padding: 30px 0 30px 60px; font-size:15pt; font-weight: bold;} .basket-p>a>i{background: #ffe400 url(../images/basket.png) no-repeat center; margin: -8px 0 0 10px; float: left; display: block; width: 40px; height: 40px; border-radius: 20px;} .morlu .basket-p>a:hover>i{background: #9f45de url(../images/basket.png) no-repeat center;} .ustLink{background: #463b4d; color:#ffffff;position: absolute; margin-top: -59px; width: 100%;opacity:0.8;} .ustLink table{margin: 0 auto;} .ustLink table td{padding: 20px; cursor: pointer; text-align: center; border-right: 1px solid #000000;} .ustLink table td:last-child{border: none;} .ustLink table td.active{background: url(../images/ar-bot.png) no-repeat center bottom;} .cloudmail>#twitterBand{background: #048ec1; height: auto; color: #ffffff;} .cloudmail>#twitterBand h1{font-size: 26pt; font-weight: normal; padding: 20px 0;} .cloudmail>#twitterBand p{font-size: 12pt; font-weight: normal; padding: 20px 0;} #barindir-banner{width: 100%; height: 476px; display: block; background: url(../images/barindir.jpg) no-repeat center; margin-top: 73px;} #barindir-banner>h2{text-indent: -99999px;} .cekyu{ background: #000000; } .mavili .basket-p>a>i{background: #ffe400 url(../images/fiyatal.png) no-repeat center;} .mavili .basket-p{padding: 30px 0 30px 40px; margin-top: -1px;} .mavili .basket-p>a{font-size: 10pt; line-height: 30px;} .mavili .basket-p>a:hover>i{background: #68c3e1 url(../images/fiyatal.png) no-repeat center;} .Mavi{background: #68c3e1; color: #ffffff;} .Mavi>span.coloco{background:#4cb4d6 url(../images/co-loco.png) no-repeat center; float: right; display: block; height: 70px; width: 70px; text-indent: -9999px;} #altyapi{width: 100%; height: 481px; display: block; background: url(../images/altyapi.jpg) no-repeat center; color: #ffffff; } #altyapi>table{width: 980px; margin: 0 auto;} #altyapi td.atms{width: 60%;} #altyapi td.krk{width: 40%;} #altyapi h3{padding: 20px 0;} #altyapi p{font-size: 11pt;} .altt td{padding: 15px 5px;} .siyah{background: #000000;} #bir-banner{width: 100%; height: 476px; display: block; background: url(../images/birban.jpg) no-repeat center; margin-top: 73px;} #bir-banner>h2{text-indent: -99999px;} .sarili .basket-p>a>i{background: #ffe400 url(../images/basket.png) no-repeat center;} .sarili .basket-p>a:hover>i{background: #ecd300 url(../images/basket.png) no-repeat center;} .Sari{background: #ffe400; color: #282828;} .Sari>span.cloud{background:#ecd300 url(../images/linux.png) no-repeat center; float: right; display: block; height: 70px; width: 70px; text-indent: -9999px;} .gri{background: #f7f7f7;} .nobotbor{border-bottom: none;} .notopbor{border-top:none;} .yesilli .basket-p>a>i{background: #ffe400 url(../images/basket.png) no-repeat center;} .yesilli .basket-p>a:hover>i{background: #32dfa0 url(../images/basket.png) no-repeat center;} .Yesil{background: #32dfa0; color: #ffffff;} .Yesil>span.cloud{background:#24d091 url(../images/linux.png) no-repeat center; float: right; display: block; height: 70px; width: 70px; text-indent: -9999px;} .beyaz{background: #ffffff;} .genoz p{font-size: 11pt;} #ekoz .alan-genel>div:nth-child(1){width: 10%;} #ekoz .alan-genel>div:nth-child(2){width: 70%;} #ekoz .alan-genel>div:nth-child(3){width: 20%; float: left; background: #ffffff; height: 124px;} #ekoz .alan-genel>div:nth-child(3)>span{padding-top:30px; display: block; width: 100%; text-align: center; font-size: 12pt;} #ekoz .alan-genel>div:nth-child(3)>strong{display: block; width: 100%; margin-top: -10px; text-align: center; font-size: 26pt;} #ekoz .alan-genel>div:nth-child(3)>strong>b{font-size: 14pt;} #ekoz .alan-genel>div:nth-child(3)>small{display: block; width: 100%; text-align: center; margin-top: -20px; font-size: 7pt;} #ekoz .alan-genel h3{font-size: 16pt; font-weight: 400; padding: 10px 0 10px 0;} #ekoz .alan-genel span{font-size:12pt; text-align: justify;} #cloudh-banner{width: 100%; height: 476px; display: block; background: url(../images/cloudhost.jpg) no-repeat center; margin-top: 73px;} #cloudh-banner>h2{text-indent: -99999px;} #kur-banner{width: 100%; height: 476px; display: block; background: url(../images/kurumsal.jpg) no-repeat center; margin-top: 73px;} #kur-banner>h2{text-indent: -99999px;} #res-banner{width: 100%; height: 476px; display: block; background: url(../images/reseller.jpg) no-repeat center; margin-top: 73px;} #res-banner>h2{text-indent: -99999px;} .turunculu .basket-p>a>i{background: #ffe400 url(../images/basket.png) no-repeat center;} .turunculu .basket-p>a:hover>i{background: #f15a25 url(../images/basket.png) no-repeat center;} .Turuncu{background: #f15a25; color: #ffffff;} .Turuncu>span.cloud{background:#d35022 url(../images/cloud-ico.png) no-repeat center; float: right; display: block; height: 70px; width: 70px; text-indent: -9999px;} .Turuncu1{background: #f15a25; color: #ffffff;} .Turuncu1>span.cloud{background:#d35022 url(../images/linux.png) no-repeat center; float: right; display: block; height: 70px; width: 70px; text-indent: -9999px;} #zimbra-banner{width: 100%; height: 476px; display: block; background: url(../images/zimbra.jpg) no-repeat center; margin-top: 73px;} #zimbra-banner>h2{text-indent: -99999px;} .rangeBg1{width:397px; height:30px; background:#ffffff; margin-bottom:100px;} .rangeBg2{width:36px; height:30px; background:#ffe400; position:absolute; z-index:0;} .rangeBg{width:397px; height:30px; background:url(../images/rangebg.png) no-repeat; position:relative; z-index:1;} .draggable{width:36px; height:50px; background-position:0 15px; } .draggable>span{width:59px; height:35px; background:url(../images/rangeText.png) no-repeat; position:absolute; margin:-20px 0 0 -13px; display:block; color:#fff; font-size:8pt; text-align:center; line-height:35px; opacity:0.9; font-weight:bold;} #sunucu-banner{width: 100%; height: 476px; display: block; background: url(../images/sunucu.jpg) no-repeat center; margin-top: 73px;} #sunucu-banner>h2{text-indent: -99999px;} .genisle>td{text-align:center; padding:20px 0; font-size:16pt; border:1px solid #7cb5c9;} .genislet>td{text-align:center; border:1px solid #dddddd; padding:10px 0;} .genislet>td>h5{color:#ff3b3b; font-size:10pt; padding:10px 0; font-weight:bold;} .detailsx{background:#ff3b3b; color:#ffffff; font-size:8pt; padding:2px 6px 1px 6px; border-radius:20px;} .detailsx:hover, .aactive{background:#0ed12e; color:#fff; text-decoration:none;} .detailsx:focus{text-decoration:none; color:#fff;} .mbot{margin-bottom:20px;} .genislet ul,.genislet ul>li{margin:0; padding:0; float:left; list-style:none; font-size:9pt;} .genislet ul>li{width:33.3%; text-align:left; background:url(../images/okcu.png) no-repeat; padding-left:20px; background-position:6px 5px;} .fif>span{display: block; width: 100%; text-align: center; font-size: 12pt;} .fif>strong{display: block; width: 100%; margin-top: -10px; text-align: center; font-size: 26pt;} .fif>strong>b{font-size: 14pt;} .fif>small{display: block; width: 100%; text-align: center; margin-top: -20px; font-size: 7pt;} .genislet .basket-p{font-size:10pt; line-height:30px;} .genislet{cursor:pointer;} .gizle{display:none;background:#f2f2f2;} .gri{background:#f2f2f2;} .nomob{display:none; margin-bottom:-1000px;} #ekoz .alan-genels{width: 49.5%; height: 134px; color:#282828; float: left; } #ekoz .alan-genels:nth-child(even){float:left;} #ekoz .alan-genels:nth-child(odd){float:right;} #ekoz .alan-genels>div:nth-child(1){background: #ffffff; text-align: center; width: 20%; border-right:1px solid #efefef; height: 124px; float: left;} #ekoz .alan-genels>div:nth-child(2){padding:10px; background: #ffffff; width: 80%; height: 124px; float: left;} #ekoz .alan-genels>div:nth-child(1){width: 10%;} #ekoz .alan-genels>div:nth-child(2){width: 70%;} #ekoz .alan-genels>div:nth-child(2)>span{font-size:10pt;} #ekoz .alan-genels>div:nth-child(3){width: 20%; float: left; background: #ffffff; height: 124px;} #ekoz .alan-genels>div:nth-child(3)>span{padding-top:30px; display: block; width: 100%; text-align: center; font-size: 12pt;} #ekoz .alan-genels>div:nth-child(3)>strong{display: block; width: 100%; margin-top: -10px; text-align: center; font-size: 26pt;} #ekoz .alan-genels>div:nth-child(3)>strong>b{font-size: 14pt;} #ekoz .alan-genels>div:nth-child(3)>small{display: block; width: 100%; text-align: center; margin-top: -20px; font-size: 7pt;} #ekoz .alan-genels h3{font-size: 16pt; font-weight: 400; padding: 10px 0 10px 0;} #ekoz .alan-genels span{font-size:12pt; text-align: justify;} .genox>div:nth-child(1){width:30%;} .genox>div:nth-child(2){width:70%;} .genox p{background:url(../images/okcu.png) no-repeat; padding-left:20px; background-position:6px 5px; margin:5px 0;} #sanal-banner{width: 100%; height: 476px; display: block; background: url(../images/sanalsunban.jpg) no-repeat center; margin-top: 73px;} #sanal-banner>h2{text-indent: -99999px;} #sanal-orta{width: 100%; height: 600px; display: block; background: url(../images/sanal-orta.jpg) no-repeat center;} #sanal-orta>div.fl{width:50%;} #sanal-orta>div.fl>div{padding:250px 30px 0 30px;} .istemci{font-weight:500; width:auto; font-size:10pt; color:#fff; margin-right:20px; padding-top:15px; padding-left:30px; } .issec>a{background:#fff; line-height:40px; color:#282828; font-weight:500; padding:10px; width:170px; margin:0 5px; display:block; float:left; border-radius:30px;} .issec>a:focus{text-decoration:none;} .issec>a:nth-child(2)>span>i{visibility:hidden;} .issecici{cursor:pointer; width:350px; background:#fff; padding:15px 10px; margin:10px 5px; display:block; border-radius:30px; } .issecici>span{float:left;} .issecici>span:nth-child(1){line-height:30px; font-size:10pt; padding-right:10px; border-right:1px solid #ddd; } .issecici>i{float:right; padding-top:5px;} .issecici>span:nth-child(2){line-height:30px; width:215px; font-size:12pt; padding-left:10px; } .acmenu{display:none; position:absolute; margin:20px 0 0 95px; background:#fff; border-radius:4px; border:1px solid #ddd;} .acmenu>ul{list-style:none; margin:0; padding:0;} .acmenu>ul>li{width:240px; padding:10px; } .acmenu>ul>li:hover{color:#ff3b3b; } .sepetcik{width:354px; height:66px; background:url(../images/sepetcik.png) no-repeat; display:block; text-indent:-9999px; margin:5px auto;} .sepetcik:hover{background-position:0 -66px;} .cekyukari{margin-top:-50px;} .ortaci td{text-align:center;} .ortaci td h3{padding:10px 0; font-size:18pt; color:#282828;} .ortaci td h5{color:#6f6f6f; width:80%; margin: 0 auto; font-size:11pt; font-weight:normal;} .gizles{display:block;} .gosters{display:none;} @media screen and (max-width: 1024px){ header{width: 980px; margin: 0 auto; height: 101px;} header>nav>ul>li{float:left; padding: 0 7px; margin-top:20px;} .dropdown-right-b{width: 410px;} header>nav>ul>li>ul>li>div>.dropdown-left{padding: 28px; } .dropdown-right{background:#e93737;padding: 28px; text-align: center; } .dropdown-bottom>span{font-size:12pt; color:#ffffff; font-weight: 500; line-height: 45px;} .dropdown-bottom{background:#d83535; padding: 18px 12px; } header>nav>ul>li>ul>li>div>.dropdown-left{padding: 32px 25px ; width: 260px; } .server{width: 490px;} .domain{width: 490px; padding-left: 20px;} #domainText{width: 350px; border: 1px solid #ffffff; font-size:13pt; line-height: 13pt; padding: 10px;} .server img{width: 485px;} #buys,#customerBar,.happyCustomer,.footer,.bottom{width: 980px;} .why>.whys{padding: 0 10px 0 50px;} .why>.whya{padding: 0 10px 0 50px;} .refimg>img{width: 100px;} #partners{background: #404040 url(../images/partners980.png) no-repeat center; } .orta{width:980px; margin: 0 auto;} .ortas{width:980px; margin: 0 auto;} .hakki{margin: 20px 0;font-size: 11pt; color:#282828; background:#ffffff; width: 60%; text-align: justify; padding-left: 2%;} .bankh{padding: 20px 0 20px 30px; width: 38%; background: #efefef;} .hak{list-style: none; margin: 0; padding: 0;} .ths>div:nth-child(1)>h3{font-size: 12pt;} .gizles{display:block;} .gosters{display:none;} } @media screen and (max-width: 768px){ .mobile-content2{display:block !important} .ortaci td{width:50%; float:left; padding:10px 0; } .ortaci td:last-child{width:100%; float:left; padding:10px 0; } .cekyukari{margin-top:0;} #sanal-orta{height:auto;} #sanal-orta{width: 100%; background:none; margin-top:0px;} #sanal-orta>div.fl{width:100%; padding:20px; background:#ff3b3b; clear:both;} #sanal-orta>div.fl:nth-child(2){background:#68c3e1; padding:20px 0;} #sanal-orta>div.fl>div:first-child{margin-top:-250px;} .rangeBg1{margin:30px 0 30px -40px;} .issec>a:last-child{width:160px; margin:0;} #ekoz .alan-genels,#ekoz .alan-genels:nth-child(even), #ekoz .alan-genels:nth-child(odd){width:95%; margin:0 auto; display:block; float:inherit;} .genox>div:nth-child(1){width:100%;} .genox>div:nth-child(2){width:100%;} .mbot.nodesk{display:none;} .nomob{display:block; margin-bottom:0;} .nomob tbody{display:block;} .nomob tbody tr.dortp.paket.mavili{display:block;} .nomob .basket-p{text-align:center;} /* .tind{text-indent: -999999px;}*/ .fl{float: inherit;} .fr{float:inherit;} .fn{float: inherit;} .clr{clear: both;} header{width: 100%; margin: 0 auto; height: auto;} #logo{width: 172px; height: 43px; display: block; background: url(../images/logo.png) no-repeat; margin: 15px auto;} .social,nav,.dropdown-menus,#partners,#happyCustomer,#carousel{display: none;} #domain{width: 100%; margin-top:70px; padding: 25px 10px; height: 230px; } .domain{width: 100%;} .domain>span{font-size: 11pt;} #server{width: 100%; padding: 0; height: 230px;} .server{width: 100%;} .server img{width: 90%; margin-top: 60px;} .domain{text-align: center; padding: 0;} #domainText{width: 100%; border: 1px solid #ffffff; font-size:13pt; line-height: 13pt; height: 49px; padding: 10px;} .domain button{background: #d13a3a; border: none; font-size:13pt; padding: 12px 12px 13px 12px; color:#ffffff; font-weight: 500; width: 100%; text-align:center;} #buys{width: 100%;} #buys>ul>li{float:inherit; width: 100%; padding: 35px 8px 35px 8px; margin-left: -20px; text-align: center; border-left:none; border-top:1px solid #e9e9e9;} #buys>ul>li:first-child{border-left:none; border-top:none;} .twitterBand{width: 100%; font-size: 12pt;} #customerBar{width: 100%;} #customerBar>.comment,.why{width: 100%; height: auto; margin: 0 auto;} #customerBar h3{margin: 20px 0 20px 0; text-align: center;} .comment{border-right: none; border-bottom: 1px solid #e2e2e2;} .comments{margin-top: 20px; text-align: center;} .comment>div>img{-webkit-border-radius: 68px; border-radius: 68px;} .customerComment{background: url(../images/quote.png) no-repeat top left; margin-left: 0; } .customerComment p:first-child{text-align: justify; font-weight: 500; padding: 0 30px;} .customerComment p:last-child{text-align: right; font-weight: 700; font-size:11pt; background: url(../images/quote.png) no-repeat bottom right; padding: 0 30px;} .why>.whys{background: url(../images/why1.png) no-repeat top left; font-size:12pt; width: 100%; margin:0px auto 0 auto; padding: 10px 0px 10px 35px; height: 200px;} .why>.whya{background: url(../images/why2.png) no-repeat top left; font-size:12pt; width: 100%; margin:0px auto 0 auto; padding: 10px 0px 10px 35px; height: 300px;} .why>p{padding: 0; margin: 0;} .whys>p:nth-child(2), p:nth-child(3){margin-top: 50px;} .whya>p:nth-child(2), p:nth-child(3){margin-top: 50px;} #call{width: 100%; margin-top: -100px; background:url(../images/arayalim-phone.png) no-repeat center; background-position-y:-120px; height: 200px; display: block;} .call{width: 100%; padding-top: 35px;} .call>a{margin: 0 auto 0 auto; position: relative; width: 240px; height: 40px; background: url(../images/sizi-arayalim-buton-phone.png) no-repeat;} .call>a:hover{background-position: 0 -40px;} #footer{background: #373737; color:#858585; margin-top: -100px;} #bottom{background: #2b2b2b; color:#858585; line-height: 65px; text-align: center; } #bottom a{color:#858585; padding: 0 5px;} #bottom a:hover{color:#ffffff;} .footer{width: 100%; margin: 0 auto;font-size:12pt;} .bottom{width: 100%; font-size:10pt;} .footer ul{list-style: none; margin: 0;} .footer>ul>li{width: 100%; float: inherit; border-right: none; min-height: auto; } .footer>ul>li>a{width: 100%; display: block; color:#858585; padding: 0 10px 0 20px; background: url(../images/arrow2.png) left center no-repeat;} .footer a:hover{color:#ffffff;} .footer>ul>li>h5{padding: 20px 10px 10px 10px;} span.skype.contact{margin-top:25px;} #bottom{line-height:20px;} .contact{padding: 0 10px 0 45px; font-size:10pt; margin-left: 10px; min-height: 40px; display: block; margin-top: 0px;} .contact:nth-child(3) , .contact:nth-child(4){line-height: 40px;} .map{background: url(../images/map.png) no-repeat left center;} .tel{background: url(../images/tel.png) no-repeat left center;} .skype{background: url(../images/skype.png) no-repeat left center; line-height: 40px;} .mail{background: url(../images/mail.png) no-repeat left center; line-height: 40px; } .mail>a{background: none; padding: 0;color:#858585;} .social2{width: 24px; height:18px; display: block; background: url(../images/social2.png) no-repeat;} .social2{float:left;} .fbs{background-position: -24px 0px;} .fbs:hover{background-position: -24px -18px} .sticky{margin-top: 0px; height: auto; border-bottom: none;} #header{width: 100%; top:0; background: #ffffff; border-bottom: 1px solid #dcdcdc; } .mobileMenu{position: absolute; width: 50px; height: 50px; background: #ff5555; color:#ffffff; display: block; padding: 10px; font-size:20pt; top:12px; right: 12px;} .mobileMenu:hover,.mobileMenu:focus{color:#740000;} #menuMobile{visibility:hidden; overflow:scroll; clear: both; width: 100%; height:100%; position:fixed; background:#ffffff; z-index: 999999999; padding: 20px 20px 0 20px; margin-top:60px;} #menuMobile>ul{list-style: none; margin-top: 10px 0 0 0; padding: 0} #menuMobile>ul>li{text-align: left; font-weight: 500;} #menuMobile>ul>li>ul{list-style: none; display: none;} #menuMobile>ul>li>a{padding: 8px 0; display: block;} #banner{width: 100%; height: 892px; overflow: hidden; display: block; background: url(../images/alan-adi.jpg) no-repeat center; margin-top: 75px;} #alanSorgula{width: 90%; } #alanSorgula .sorgu>input{width: 100%; } #alanSorgula .sorgu>button{width:100%; margin-left: 0;} #alanSorgula>h2{text-align: center; padding:50px 0 25px 0;} .nomobile{display: none;} .orta{width: 100%; height: auto; padding-bottom: 150px;} .orta h1{margin-left: 10px;} .alan-genel{width: 95%; margin: 0 auto; float: inherit; display: block;} .alan-genel:nth-child(2),.alan-genel:nth-child(4),.alan-genel:nth-child(6){float: inherit;} #alanSorgula .uzanti{margin:0 0 0 60px;} .ortas{width: 100%; height: auto; padding-bottom: 150px;} .ortas h1{margin-left: 10px;} .ortas p{margin-left: 10px;} .d-genel{width: 95%; margin: 0 auto; float: inherit; display: block;} .d-genels{width: 95%; margin: 0 auto; float: inherit; display: block;} .d-genel:nth-child(4){float: inherit;} .d-genel:nth-child(3){float: inherit;} .d-genel:nth-child(6){float: inherit;} .d-genel>div:nth-child(1){font-size:12pt; } .d-genels>div:nth-child(1){font-size:12pt;} .pad{height: 200px} .hakki{margin: 20px auto; width: 95%; text-align: justify; padding-left: 0; float: inherit; min-height: auto;} .bankh{margin: 0 auto; width: 100%; float: inherit;min-height: auto; } .lihe td{width: 100%; display: block; padding: 10px; border-bottom: 1px solid #efefef;} .lihe td:nth-child(1){text-align: center; margin: 5px;} .dortp td{width: 95%; display: block; margin: 0 auto;} .cloudmail #twitterBand{height:650px;} .acikver h1{font-size: 16pt; float: left;} .birim{float: right; margin-right: 10px;} .acikver{margin-bottom: 20px;} .cloudmail #twitterBand h3{padding: 10px 0; font-size: 16pt;} .cloudmail #twitterBand p{padding: 10px 0; font-size: 10pt;} .basket-p{border:1px solid #eaeaea; padding: 30px 0 30px 60px; font-size:15pt; font-weight: bold;} .basket-p>a>i{background: #ffe400 url(../images/basket.png) no-repeat center; margin: -8px 0 0 10px; float: left; display: block; width: 40px; height: 40px; border-radius: 20px;} .morlu .basket-p>a:hover>i{background: #9f45de url(../images/basket.png) no-repeat center;} .ustLink{margin-top: -71px;} .ustLink td>h4{font-size: 11pt;} .ths>div:nth-child(1)>h3{font-size: 16pt;} #altyapi,.cekyu{display: none;} #ekoz .alan-genel h3{font-size: 14pt; font-weight: 400; padding: 10px 0 10px 0;} #ekoz .alan-genel span{font-size:10pt; text-align: justify;} .gizles{display:none;} .gosters{display:block;} /* Main menu positionning */ .main-nav{ position: absolute; top: 0; right: 0; left: 0; bottom: 0; text-align: center; background: #FFF; opacity: 0; z-index: -1; visibility: hidden; transition: all .375s; font-family: 'Montserrat', sans-serif; } .main-nav.is-open{ opacity: 1; z-index: 100; visibility: visible; } /* Yellow band effect */ .main-nav::before{ content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: -15px; background: #fe422a; transform-origin: 0 0; transform: skew(-14deg) translateX(-120%); transition: all .275s .1s; } .main-nav.is-open::before{ transform: skew(-14deg) translateX(0); } /* Skewing effect on menu links */ .main-nav ul{ display: inline-flex; flex-direction: column; height: 93%; /* Should be 100%, but we have a notice message :D */ align-items: flex-end; justify-content: center; transform: translateX(-18%) skew(-16deg); } .main-nav li{ display: block; margin: .5rem 0; text-align: right; transform: skew(16deg); } /* Apparition effect on links */ .main-nav a{ opacity: 0; transform: translateY(-10px); } .main-nav.is-open a{ opacity: 1; transform: translateY(0); } .main-nav li:nth-child(1) a{ transition: all 275ms 175ms } .main-nav li:nth-child(2) a{ transition: all 275ms 225ms } .main-nav li:nth-child(3) a{ transition: all 275ms 275ms } .main-nav li:nth-child(4) a{ transition: all 275ms 325ms } .main-nav li:nth-child(5) a{ transition: all 275ms 375ms } /* Decoration */ .main-nav ul, .main-nav li{ list-style: none; padding: 0; } .main-nav a{ display: block; padding: 12px 0; color: #e2e0e0; font-size: 1.4em; text-decoration: none; font-weight: bold; } /* Burger Style: @see: https://codepen.io/CreativeJuiz/full/oMZNXy */ .open-main-nav{ position: absolute; top: 15px; padding-top: 20px; right: 15px; z-index: 1000; background: none; border: 0; cursor: pointer; } .open-main-nav:focus{ outline: none; } .burger{ position: relative; display: block; width: 28px; height: 4px; margin: 0 auto; background: #ffffff; transform: skew(5deg); transition: all .275s; } .burger:after, .burger:before{ content: ''; display: block; height: 100%; background: #fe422a; transition: all .275s; } .burger:after{ transform: translateY(-12px) translateX(-2px) skew(-20deg); } .burger:before{ transform: translateY(-16px) skew(-10deg); } /* Toggle State part */ .is-open .burger{ transform: skew(5deg) translateY(-8px) rotate(-45deg); } .is-open .burger:before{ transform: translateY(0px) skew(-10deg) rotate(75deg); } .is-open .burger:after{ transform: translateY(-12px) translateX(10px) skew(-20deg); opacity: 0; } /* MENU Text part */ .burger-text{ display: block; font-size: .675rem; letter-spacing: .05em; margin-top: .5em; text-transform: uppercase; font-weight: 500; text-align: center; color: #fe422a; font-family: 'Montserrat', sans-serif; } .device{ position: relative; width: 345px; height: 600px; background: #FFF; border: 1px solid #EEE; border-radius: 3px; box-shadow: 0 0 0 10px rgba(0,0,0,.1); } .container{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background: linear-gradient(to bottom, #eee, #ddd); } /* Notice */ .notice{ position: absolute; bottom: -15px; left: 0; right: 0; padding: 20px; background: #F2F2F2; color: #5A3B5D; font-size: 14px; font-weight: 400; line-height: 1.5; z-index: 100; text-align: center; } .notice strong{ font-weight: 700; } .notice a{ padding: 2px 3px; background: #FEDC2A; text-decoration: none; } .mobile-content{ position: relative; border: 1px solid #EEE; margin:10px auto; width:345px; min-height:600px; border-radius: 3px; box-shadow: 0 0 0 10px rgba(0,0,0,.1); background: #FFF; } ul.nav-menu, .nav-menu ul{ list-style:none; margin:0; padding:0; display:block; width:100%; } ul.nav-menu ul{ /**/display:none; } ul.sub-nav{ background:white; width:100%; display:block; z-index:999; } ul.sub-nav li a{ color:#000; z-index:999; } .conteiner{ position:relative; display:block; width:100%; height:600px; overflow:hidden; } .nav-menu.is-open{ opacity: 1; z-index: 100; visibility: visible; } .nav-menu{ position:absolute; top:0; right:0; left:0; bottom:0; padding:40px 0 !important; opacity: 0; z-index: -1; visibility: hidden; transition: all .375s; font-family: 'Montserrat', sans-serif; justify-content: center; transform: translateX(-21%) skew(-16deg); } .nav-menu:before{ position:absolute; top:0; bottom:0; left:105%; z-index:-1; content:""; display:block; width:103%; background: #fe422a; transform-origin: 0 0; transition: all .275s .1s; transform-origin: 0 0; transform: translateX(-120%); } .nav-menu.is-open::before{ transform: translateX(-105%); } .nav-menu>li a{ color: #DDD; padding: 12px 0; font-size: 1.2em; text-decoration: none; font-weight: bold; display:block; text-align:right; padding-right:65px; transform: skew(16deg); } .nav-menu>li{ opacity: 0; transform: translateY(-15px); transition: none; } .nav-menu.is-open>li{ opacity: 1; transform: translateY(0); } .nav-menu.is-open li:hover{ background:rgba(0,0,0,0.3); } .nav-menu>li:hover ul{ display:block; } .nav-menu>li:nth-child(1) { transition: all 275ms 175ms; } .nav-menu>li:nth-child(2) { transition: all 275ms 225ms; } .nav-menu>li:nth-child(3) { transition: all 275ms 275ms; } .nav-menu>li:nth-child(4) { transition: all 275ms 325ms; } .nav-menu>li:nth-child(5) { transition: all 275ms 375ms; } .nav-menu>li:nth-child(6) { transition: all 275ms 425ms; } .nav-menu>li:nth-child(7) { transition: all 275ms 475ms; } .nav-menu>li:nth-child(8) { transition: all 275ms 525ms; } .nav-menu>li:nth-child(9) { transition: all 275ms 575ms; } .nav-menu>li:nth-child(10) { transition: all 275ms 625ms; } .nav-menu>li .arrow{ height: 0; width: 0; display: block; position: absolute; top: 22px; border: 5px solid transparent; border-top: 5px solid #fff; right: 33px; transform: skew(16deg); } .open-main-nav{ position: absolute; top: 9px; padding-top: 20px; right: 3px; z-index: 1000; background: none; border: 0; cursor: pointer; } .open-main-nav:focus{ outline: none; } .burger{ position: relative; display: block; width: 28px; height: 4px; margin: 0 auto; background: #fe422a; transition: all .275s; } .burger:after, .burger:before{ content: ''; display: block; height: 100%; background: #fe422a; transition: all .275s; } .burger:after{ transform: translateY(-12px) } .burger:before{ transform: translateY(-16px); } /* Toggle State part */ .is-open .burger{ transform: translateY(-10px) rotate(-45deg); background: #fff; } .is-open .burger:before{ transform: translateY(0px) rotate(90deg); background: #fff; } .is-open .burger:after{ opacity: 0; } }