/*!
 * Responsinator by https://www.kang-ismet.com
 */
body {
  background: #f1f1f1;
  font-family:Arial,sans-serif;
  font-weight:normal;
  font-size:14px;
  line-height: 100%;
  margin:0;
  padding:0;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #fafafa; 
}
 ::-webkit-scrollbar-thumb {
  background: #999; border-radius:6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #666; 
}
#header{min-width: 1024px;background: #3b495f;margin: 0px;color: white;height: 45px;display: block;width: 100%;}
form {
    margin: 7px 0px 0px 20px;
    padding: 0px;
    float: left;
}
#header a{color:#e2e7f0;text-decoration:none}
#header a:hover{color:white}
#header input[type="submit"] {
    background: #f7c75f;
    border: none;
    border-radius: 30px;
    height: 30px;
    width: 30px;
    text-align: center;
    font-family: helvetica, arial, sans-serif;
    font-size: 11px;
    opacity: 1;
    text-transform: uppercase;
    font-weight: normal;
    color: white;
    margin-left: 5px;
    cursor: pointer;
}
::placeholder {color:#afadaf}
input#url {
    padding: 5px 10px 7px 10px;
    margin-left: 5px;
    width: 250px;
    color: white;
    background: #8c97a9;
    border: none;
    outline: none;
    font-size: 13px;
    border-radius: 3px;
    font-family: helvetica, arial, sans-serif;
}
.about {
    float: right;
    padding-right: 20px;
    padding-top: 15px;
}
.m3{margin-right:15px}
.container{width:100%;padding-top:150px;scroll-behavior: smooth;transition: transform 0.6s ease-in-out;}
/* iPhone 13 */
 .iphone-13-pro{
  position: relative;
  width: 390px;
  height: 844px;
  background:white;
  border:18px solid #332c2b;
  margin: auto;
  border-radius:65px;
  padding-top:42px;
  margin-bottom:20px;
}

/* Konten */
.iphone-13-pro .content {
  width: 390px;
  height: 844px;
  background: white;
  margin: 0 auto;
  border-radius:65px;
}

.iphone-13-pro .content iframe{
  border-radius:0 0 45px 45px;
}
.poni-ip13{position:absolute;top:-1px;right:25px}
.desc{text-align:center;margin-bottom:60px}

/* iPhone 13 */
 .iphone-13-pro-h{
  position: relative;
  width: 844px;
  height: 390px;
  background:white;
  border:18px solid #332c2b;
  margin: auto;
  border-radius:65px;
  margin-bottom:20px;
}

/* Konten */
.iphone-13-pro-h .content {
  width: 844px;
  height: 390px;
  background: white;
  margin: 0 auto;
  border-radius:65px;
}
.poni-ip13-h{position:absolute;left:-1px;top:116px}
.iphone-13-pro-h .content iframe{
  border-radius:45px;
}

/* Renote 10 Pro */
 .renote10{
  position: relative;
  width: 432px;
  height: 870px;
  background:white;
  border:18px solid #332c2b;
  border-bottom-width:30px;
  margin: auto;
  border-radius:50px 50px 65px 65px;
  margin-bottom:20px;
  padding-top:38px;
  padding-bottom:52px;
}

/* Konten */
.renote10 .content {
  width: 432px;
  height: 870px;
  background: white;
  margin: 0 auto;
}
.renote-top{position:absolute;top:0;left:0;bottom:0}
.renote-bottom{position:absolute;bottom:0;left:0;bottom:0}

/* Renote 10 Pro */
 .renote10h{
  position: relative;
  width: 870px;
  height: 395px;
  background:white;
  border:18px solid #332c2b;
  border-right-width:30px;
  margin: auto;
  border-radius:50px 65px 65px 50px;
  margin-bottom:20px;
  padding-top:37px;
  padding-right:52px;
  padding-left:37px;
}
.renote10h:before{
content: '';
  display: block;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translate(-50%, -50%);
  background: #555;
  border-radius: 50px;
  z-index:1;
}
/* Konten */
.renote10h .content {
  width: 872px;
  height: 395px;
  background: white;
  margin: 0 auto;
}
.renote-top-h{position:absolute;top:0;left:37px}
.renote-right-h{position:absolute;top:0;right:0;bottom:0}
.renote-left-h{position:absolute;top:0;left:-1px;bottom:0}


/* iPhon 6 */
 .iphone6{
  position: relative;
  width: 375px;
  height: 647px;
  background:white;
  border:24px solid #332c2b;
  border-top-width:105px;
  border-bottom-width:106px;
  border-radius:65px;
  margin: auto;
  margin-bottom:20px;
  padding-top:18px;
}

/* Konten */
 .iphone6 .content {
  width: 375px;
  height: 605px;
  background: white;
  margin: 0 auto;
}
.iphone6-top{position:absolute;top:-52px;left:0}
.iphone6-bottom{position:absolute;bottom:-90px;right:0;left:0}

/* iPhon 6 */
 .iphone6h{
  position: relative;
  width: 667px;
  height: 375px;
  background:white;
  border:24px solid #332c2b;
  border-left-width:105px;
  border-right-width:106px;
  border-radius:65px;
  margin: auto;
  margin-bottom:20px;
}

/* Konten */
 .iphone6h .content {
  width: 667px;
  height: 356px;
  background: white;
  margin: 19px auto;
}
.iphone6-top-h{position:absolute;top:0;right:0}
.iphone6-bottom-h{position:absolute;bottom:0;left:0}
.iphone6-left-h{position:absolute;top:156px;left:-52px}
.iphone6-right-h{position:absolute;top:153px;right:-85px}

/* Galaxy Fold 4 */
 .fold{
  position: relative;
  width: 280px;
  height: 653px;
  background:white;
  border:13px solid #332c2b;
  border-radius:37px;
  margin: auto;
  margin-bottom:20px;
  padding-top:27px;
  padding-bottom:39px;
}

/* Konten */
 .fold .content {
  width: 280px;
  height: 653px;
  background: white;
  margin: 0 auto;
}
.fold-top{position:absolute;top:0;right:-1px}
.fold-bottom{position:absolute;bottom:-1px;right:-1px}

/* Galaxy Fold 4 */
 .foldh{
  position: relative;
  width: 653px;
  height: 280px;
  background:white;
  border:13px solid #332c2b;
  border-radius:37px;
  margin: auto;
  margin-bottom:20px;
  padding-left:27px;
  padding-right:39px;
}

/* Konten */
 .foldh .content {
  width: 653px;
  height: 253px;
  background: white;
  margin: 27px auto 0;
}

.foldh:before{
content: '';
  display: block;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50px;
}
.fold-top-h{position:absolute;top:0;right:38px}
.fold-right{position:absolute;bottom:0;right:-1px}

/* iPad Mini 5 */
.ipad {
  position: relative;
  width: 768px;
  height: 1024px;
  margin: auto;
  border: 32px black solid;
  border-top-width: 110px;
  border-bottom-width: 110px;
  border-radius: 40px;
  margin-bottom:20px;
}

/* Mic */
.ipad:before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50px;
}

/* Konten */
.ipad .content {
  width: 768px;
  height: 930px;
  background: white;
  margin-top: 94px;
}
.ipadtop{position:absolute;top:-1px;right:0}
.ipbutton{position:absolute;bottom:-90px;left:350px}

/* iPad Mini 5 */
.ipadh {
  position: relative;
  width: 1024px;
  height: 768px;
  margin: auto;
  border: 32px black solid;
  border-left-width: 110px;
  border-right-width: 110px;
  border-radius: 40px;
  margin-bottom:20px;
}

/* Mic */
.ipadh:before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50px;
}

/* Konten */
.ipadh .content {
  width: 1024px;
  height: 674px;
  background: white;
  margin-top: 94px;
}
.ipadtoph{position:absolute;top:-1px;right:0}
.ipbuttonh{position:absolute;right:-90px;top:349px}

iframe {background:transparent url('http://3.bp.blogspot.com/-Id9iv_USm4o/UbU3WLdcYrI/AAAAAAAAANs/gZLU48rPnnw/s1600/ajax-loader+(2).gif') no-repeat 50% 45%}

footer{width:100%;background-color:#e3e2e4;min-height:135px;}
footer p{opacity:.5}
.ftcont{margin:0 auto;max-width:1200px;text-align:center;padding-top:40px;font-size:12px}
.ki{font-size:14px;text-transform: uppercase;letter-spacing: 4px;}
.credit {background:#c9c9c9;height:45px;text-align:center;line-height:45px;position:relative;display:block} 

.acccontainer {
  width: 80%;
  max-width: 600px;
  margin: 50px auto;
  transition: transform 0.6s ease-in-out;transform: translateZ( 0 );
}

button.accordion {
  width: 100%;
  background-color: whitesmoke;
  border: none;
  outline: none;
  text-align: left;
  padding: 15px 20px;
  font-size: 18px;
  color: #333;
  cursor: pointer;
  transition: background-color 0.2s linear;
}

button.accordion:after {
  font-family: FontAwesome;
  content: "\f0dd";
  font-family: "fontawesome";
  font-size: 18px;
  float: right;
}

button.accordion.is-open:after {
  content: "\f0de";
}

button.accordion:hover,
button.accordion.is-open {
  background-color: #ddd;
}

.accordion-content {
  background-color: white;
  border-left: 1px solid whitesmoke;
  border-right: 1px solid whitesmoke;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
}
.accordion-content p{line-height:1.6em}
div:target{padding-top:20px}

.devicecont {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: left;
  background: transparent;
  z-index:5;
}
.device{
  width:250px;
  position:fixed;
  top:55px;
  right:-10px;
  z-index:999;
  background-color:#fff;
  color:#666;
  box-shadow: 0 1rem 3rem rgb(83 88 93 / 15%) !important;
  text-align:left;
  border:1px solid #e7e7e7;
  border-radius:6px;
  background-clip:padding-box;
}
.device ul{margin:0;padding:0}
.device li {
  padding:10px 15px;
  list-style:none;
  clear:both;
  position:relative;
  border-top: 1px solid #e7e7e7;
  background-color: white;
  margin:0
}
.device p{margin-left:15px}
.device a{color:#aaa;text-decoration:none}
.deviceClose {
  position: absolute;
  right: 1.5em;
  top: 1em;
  width: 1em;
  height: 1em;
  cursor: pointer;
}

.deviceClose:after,
.deviceClose:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 1em;
  background: #ccc;
  display: block;
  transform: rotate(45deg);
  left: 50%;
  margin: -3px 0 0 -1px;
  top: 0;
}

.deviceClose:hover:after,
.deviceClose:hover:before {
  background: #aaa;
}

.deviceClose:before {
  transform: rotate(-45deg);
}
.deviceState {
  display: none;
}

.deviceState:checked + .devicecont {
  opacity: 1;
  visibility: visible;
}
.devBg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.btn {position:fixed;top:55px;right:0;padding:15px 10px;border-radius:10px 0 0 10px;background:white;border:1px solid :#aaa;font-size:40px;box-shadow: 0 5px 20px 0 rgb(0 0 0 / 10%)}
.btn:after {
  font-family: FontAwesome;
  content: "\f10b";
  font-family: "fontawesome";
  font-size: 40px;
  cursor:pointer;
}
.dark a{color:#111}