Team:SUSTech Shenzhen/css/homepage-css

body {

   font-family: 'Questrial','Helvetica Neue',Arial,sans-serif;
   background-color: #282828;
   color: #d3d3d3;
   webkit-tap-highlight-color: #222

}

hr {

   max-width: 80px;
   border-width: 3px;
   opacity: .09;
   margin-top: 15px;
   margin-bottom: 15px

}

hr.light {

   border-color: #fff

}

.wide-space {

   letter-spacing: 1.6px

}

.icon-lg {

   font-size: 50px;
   line-height: 18px

}

.bg-primary {

   background-color: #333

}

.bg-dark {

   color: #eee;
   background-color: #222

}

.cursive {

   font-family: 'Lato',cursive;
   text-transform: none

}

.text-faded {

   color: rgba(245,245,245,0.7)

}

.text-dark {

   color: #111

}

.text-primary {

   color: #9c27b0

}

.no-padding {

   padding: 0

}

header {

   position: relative;
   min-height: auto;
   text-align: center;
   color: #fff;
   width: 100%;
   background-color: #c9c9c9;
   background-position: center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover

}

header .header-content {

   position: relative;
   width: 100%;
   padding: 100px 15px;
   text-align: center;
   z-index: 2

}

header .header-content .inner h1 {

   margin-top: 0;
   margin-bottom: 0

}

header .header-content .inner p {

   margin-bottom: 50px;
   font-size: 16px;
   font-weight: 300;
   color: rgba(255,255,255,0.7)

}

1. video-background {

   position: absolute;
   right: 0;
   bottom: 0;
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
   z-index: 1

}

1. video-background.collapsing {

   display: none

}

footer {

   background-color: #2d2d2d

}

section {

 padding: 70px 0;

}

.gallery-box {

 display: block;
 position: relative;
 margin: 0 auto;
 max-width: 650px;
 overflow: hidden;
 height: 350px;

}

.gallery-box .gallery-box-caption {

 display: block;
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 100%;
 text-align: center;
 color: #fff;
 opacity: 0;
 background: rgba(44, 44, 44, .8);
 -webkit-transition: all .35s;
 -moz-transition: all .35s;
 transition: all .35s;

}

.gallery-box .gallery-box-caption .gallery-box-content {

 position: absolute;
 top: 50%;
 width: 100%;
 text-align: center;
 transform: translateY(-50%);

}

.gallery-box:hover .gallery-box-caption {

 opacity: 1;

}

.gallery-box:hover img {

 -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);

}

.gallery-box img {

 -webkit-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
 height: 100%;
 min-width: 100%;

}

.gallery-box:hover .gallery-box-image {

 -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);

}

.gallery-box .gallery-box-image {

 -webkit-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
 height: 100%;
 width: 100%;
 -o-background-size: cover;
 -moz-background-size: cover;
 -webkit-background-size: cover;
 background-size: cover;

}

@media(min-width: 768px) {

   .icon-lg {
       font-size:80px
   }

   header {
       min-height: 100vh
   }

   header .header-content {
       position: absolute;
       top: 50%;
       padding: 0 50px;
       -webkit-transform: translateY(-50%);
       -ms-transform: translateY(-50%);
       transform: translateY(-50%)
   }

   header .header-content .inner {
       margin-right: auto;
       margin-left: auto;
       max-width: 1000px
   }

   header .header-content .inner h1 {
       font-size: 53px
   }

   header .header-content .inner p {
       margin-right: auto;
       margin-left: auto;
       max-width: 80%;
       font-size: 18px
   }

   section {
       min-height: 600px;
       padding: 100px 0
   }

}