/* import fonts */

@keyframes flash {

0% {

  opacity: 1;

}

50% {

  opacity: 0;

}

100% {

  opacity: 1;

}

}

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400;

  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');

  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;

}

/* cyrillic */

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400;

  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');

  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;

}

/* greek-ext */

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400;

  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');

  unicode-range: U+1F00-1FFF;

}

/* greek */

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400;

  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');

  unicode-range: U+0370-03FF;

}

/* vietnamese */

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400;

  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');

  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;

}

/* latin-ext */

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400;

  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');

  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;

}

/* latin */

@font-face {

  font-family: 'Open Sans';

  font-style: normal;

  font-weight: 400;

  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}

::-webkit-scrollbar {

    width: 12px;

}



::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

    opacity:0.8;

    background-color: #512df8;

}



::-webkit-scrollbar-thumb {

   background-color:  #373747;



}









::-moz-scrollbar {

    width: 14px;

}



::-moz-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

    opacity:0.8;

    background-color: #512df8;

}



::-moz-scrollbar-thumb {

   background-color: #373747;



}







::-o-scrollbar {

    width: 14px;

}



::-o-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

    opacity:0.8;

    background-color: #512df8;

}



::-o-scrollbar-thumb {

   background-color: #373747;



}





scrollbar {

    width: 14px;

}



scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

    opacity:0.8;

    background-color: #512df8;

}



scrollbar-thumb {

   background-color: #373747;



}

@import url('https://fonts.googleapis.com/css?family=Cairo');

* {

  font-family: 'Open Sans';

}



#top-section {

  width:100%;

  height: 100vh;

  position: relative;

  background: url("../screenshots/bg-2.jpg");

  background-size: cover;

  background-repeat: no-repeat;



}

.overlayer {

  width: 100%;

  height: 100vh;

  background: #282c2f;

  opacity: 0.9;

  position: absolute;

}

.text-container {

  width: 100%;

  min-height: 20px;

  overflow: auto;

  position: absolute;

    left: 50%; /* positions img relative to container */

    top: 50%;  /* positions img relative to container */

    transform: translate(-50%, -50%);

      text-align: center;

}

.text-container button {

  text-align: center;

}

#top-section h2 {

  color: #fff;

  font-size: 24pt;

  font-weight: bold;

}

.loading {

  width: 100%;

  height: 100vh;

  position: fixed;

  z-index: 99999999999999999;

  background: #000;

  text-align: center;

}

.loading h2 {

  color: #fff;

  font-size: 24pt;

  opacity:0.8;

  position: relative;

     top: 50%;

     transform: translateY(-50%);

     animation: flash 0.5s ease infinite;

}

#top-section button {

  background: #00aedc;

  padding: 12px 50px;

  color: #fff;

  font-size: 16pt;

  border-radius: 10px;

  border: 0;

  margin-top: 10px;

  transition: 0.5s ease;

  margin-left: 10px;

  margin-bottom:10px;

}

#top-section button:hover {

  background: #fff;

  color: #00aedc;

}

.demo-container {

  width: 100%;

  height: 320px;

  overflow: auto;

  position: relative;



}

.col-md-6 {

  margin-bottom: 25px;

}

.demo-container img {

  width: 100%;

  height: 100%;

  margin: 0;

  border-top-left-radius: 10px;

  border-top-right-radius: 10px;

}

.d-label {

  width: 100%;

  min-height: 20px;

  overflow: auto;

  padding: 14px;

  text-align: center;

background: #512df8;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

}

.d-label h2 {

  color: #fff;

  margin: 0;

  font-size: 16pt;

  line-height: 30px

}

.layer-container {

  width: 100%;

  height: 100%;

  background: #000;

  opacity: 1;

  background: url("../screenshots/black-layer.png");

  position: absolute;

  top: 0;

  z-index: 999999;

  border-top-left-radius: 10px;

  border-top-right-radius: 10px;

  display: none;

}

.demo-links {

  width: auto;

  min-height: 20px;

  overflow: auto;

  position: absolute;

    left: 50%; /* positions img relative to container */

    top: 50%;  /* positions img relative to container */

    transform: translate(-50%, -50%);



}

.demo-links h3 {

  color: #fff;

  font-size: 16pt;

  background: #512df8;

  padding: 15px;

  border-radius: 5px;

  cursor: pointer;

}

.demo-links a {

  text-decoration: none;

}

.demo-links a:hover {

  text-decoration: none;

}

.demo-links a h3:hover {

  background: #fff;

  color: #512df8;

}

.footer {

  width: 100%;

  min-height: 70px;

  overflow: auto;

  background: #161421;

  padding-top: 28px;

  position: relative;

}

.footer h2 {

  font-size: 12pt;

  color: #fff;

  text-align: center;

  margin: 0;

  font-weight: bold;

}

.footer h3 {

  position: absolute;

  left: 10px;

  top: 12px;

  color: #fff;

  font-size: 11pt;

  padding: 15px;

  background-color: #512df8;

  border-radius: 10px;

  margin: 0;

}

.footer h3 i {

  color: #dc0c42

}