﻿

.cd-container {

  width: 90%;

  max-width: 768px;

  margin: 0 auto;

  display:block

}

.cd-container::after {

  /* clearfix */

  display: table;

  clear: both;

}



/* -------------------------------- 



Main components 



-------------------------------- */



main p {

  font-size: 14px;

  font-size: 1rem;

  line-height: 22px;

}

@media only screen and (min-width: 1024px) {

  main p {

    font-size: 14px;

    font-size: 1rem;

  }

}



.cd-top {

  display: inline-block;

  height: 40px;

  width: 40px;

  position: fixed;

  bottom: 40px;

  right: 10px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

  /* image replacement properties */

  overflow: hidden;

  text-indent: 100%;

  white-space: nowrap;

  background: rgba(23,132,195, 0.8) url(../fonts/cd-top-arrow.svg) no-repeat center 50%;

  visibility: hidden;

  opacity: 0;

  -webkit-transition: all 0.3s;

  -moz-transition: all 0.3s;

  transition: all 0.3s;

  border-radius:50%;

}

.cd-top.cd-is-visible {

  /* the button becomes visible */

  visibility: visible;

  opacity: 1;

}

.cd-top.cd-fade-out {

  /* 如果用户继续向下滚动,这个按钮的透明度会变得更低 */

  opacity: .5;

}

.no-touch .cd-top:hover {

  background-color: #e86256;

  opacity: 1;

}

@media only screen and (min-width: 768px) {

  .cd-top {

    right: 20px;

  }

}

@media only screen and (min-width: 1024px) {

  .cd-top {

    height: 50px;

    width: 50px;

    right: 30px;

  }

}
