/* Name: Disetki.com Description: by Ortak Sanatlar Creative Version: 1.0.0 */ /** CSS RESET *************************/ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,figure,menu{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object,menu,main{display:block}a img{border:0}figure{position:relative}figure img{width:100%}body a{text-decoration:none;outline:none;cursor:pointer;}Body ul, body ul li{list-style:none;}h1,h2,h3,h4,h5,h6{font-weight:normal;}img, object, embed{max-width:100%;height:auto;} /** MAIN *************************/ html { max-width:100%; height:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-smoothing:grayscale; backface-visibility:hidden; } body { max-width:100%; height:100%; color:#000; background:#FFF; font-family: 'Open Sans', sans-serif; } body::-webkit-scrollbar { display:none; } input { font-family: 'Open Sans', sans-serif; font-weight:400; outline:none; } #container { margin:0 auto; width:calc(100% - 120px); height:auto; position:relative; } .row { width:100%; height:auto; position:relative; float:left; box-sizing:border-box; } .row:after { content:''; display:table-cell; clear:both; } .cxl { width:100%; height:auto; position:relative; float:left; box-sizing:border-box; } .dpn { display:none; } /** HEADER *************************/ #header { padding:15px 0; width:calc(100% - 120px); height:60px; position:fixed; z-index:99; background:#FFF; } #header .nav { width:100%; height:30px; position:relative; float:left; text-align:center; display:block; } #header .nav ul { display:inline-block; } #header .nav ul li { width:auto; height:30px; line-height:30px; position:relative; float:left; display:block; } #header .nav ul li a{ padding:0 15px; color:#ed6c05; font-size:16px; display:block; } #header .nav ul li:first-child a{ padding-left:0; } #header .nav ul li:last-child a { padding-right:0; } #header .nav ul li a:hover { color:#999; } /** PAGE *************************/ #main { padding-top:60px; } #main .post { padding:60px 120px; width:100%; } #main .post h1 { margin-bottom:15px; width:100%; height:auto; line-height:48px; float:left; font-size:48px; font-weight:700; } #main .post h2 { margin-bottom:15px; width:100%; height:auto; line-height:42px; float:left; font-size:36px; font-weight:700; } #main .post p { width:100%; height:auto; line-height:21px; float:left; font-size:14px; font-weight:400; } #main .post ul { width:100%; height:auto; float:left; } #main .post ul li { margin-bottom:15px; padding-left:60px; width:100%; height:auto; line-height:24px; float:left; font-size:18px; font-weight:400; color:#8c8c8c; box-sizing:border-box; position: relative; } #main .post ul li:before { content:''; display:block; position:absolute; left:0; top:12px; width:48px; height:2px; line-height:2px; font-size:48px; font-weight:400; background:#F5F5F5; } #main .post ul li:last-child { margin-bottom:0; } #main #intro { padding:0; width:100%; height:598px; overflow: hidden; } #main #intro .cover { width:100%; height:100%; position:absolute; z-index:2; left:0; top:0; background:url(assets/img/cc.png) repeat; opacity:.4; } #main #intro .logo { width:auto; height:90px; position:absolute; z-index:3; left:50%; top:50%; transform: translate(-50%,-50%); } #main #who { padding:60px 180px; background:#e9e9e9; } #main #who p { line-height:30px; font-size:21px; font-weight:700; color:#777; text-align:center; } #main #what { padding-top:0; background:#FFF; } #main #what .ch { width:50%; position:relative; float:left; } #main #what .menu { padding-top:110px; width:100%; height:15px; position:relative; float:left; } #main #what .menu a { margin-right:15px; width:15px; height:15px; display:inline-block; border-radius:10px; background:#ed6c05; } #main #what .menu a.active { background:#e9e9e9; position:relative; } #main #what .menu a.active:before { content:''; width:1px; height:115px; top:-115px; left:7px; background:#e9e9e9; display:block; position: absolute; } #main #what h2 { width:100%; padding-top:60px; color:#999; } #main #what ul { padding-top:60px; width:100%; height:auto; float:left; } #main #done { background:#F5F5F5; text-align:center; } #main #done h2 { margin-bottom:45px; text-align:center; color:#999; line-height:36px; float:left; font-size:30px; } #main #done a { margin-right:45px; width:auto; height:35px; display:inline-block; } #main #done a img { width:auto; height:35px; opacity:.25; transition:all .6s cubic-bezier(0.86, 0, 0.07, 1); } #main #done a:hover img { opacity:.95; } #main #contact { padding:60px; text-align:center; } #main #contact span:nth-child(-n+2) { margin-right:15px; } @media handheld, only screen and (max-width: 767px) { #container,#header { width:calc(100% - 30px); } #header .nav ul li a{ padding:0 5px; font-size:15px; } #main .post { padding:30px; } #main .post h1 { line-height:36px; font-size:32px; } #main .post h2 { line-height:30px; font-size:26px; } #main .post p { line-height:18px;} #main .post ul li { margin-bottom:5px; line-height:18px; font-size:15px; } #main #intro { height:348px; background: url(assets/img/bg.gif); background-size:cover; } #main #who { padding:30px; } #main #who p { line-height:24px; font-size:18px; } #main #what .ch { width:100%; position:relative; float:left; } #main #what .menu { padding-top:50px; width:100%; text-align:center; } #main #what .menu a.active:before { height:50px; top:-50px; } #main #what h2 { padding-top:30px; } #main #what ul { padding-top:30px; } #main #done a { margin-right:15px; margin-bottom:30px;} #main #contact span { width:100%; margin-right:0; margin-bottom:15px; position: relative; float: left; } }