CAU_China

/* Scroll Down Icon*/

goToBox {

position: relative; width: 30px; height: 28px; left: calc(50% - 15px); } .chevron { position: absolute; width: 28px; height: 8px; opacity: 0; transform: scale3d(0.5, 0.5, 0.5); animation: move 3s ease-out infinite; }

.chevron:first-child { animation: move 3s ease-out 1s infinite; }

.chevron:nth-child(2) { animation: move 3s ease-out 2s infinite; }

.chevron:before, .chevron:after { content: ' '; position: absolute; top: 0; height: 100%; width: 51%; background: #fff; }

.chevron:before { left: 0; transform: skew(0deg, 30deg); }

.chevron:after { right: 0; width: 50%; transform: skew(0deg, -30deg); }

@keyframes move { 25% { opacity: 1;

} 33% { opacity: 1; transform: translateY(30px); } 67% { opacity: 1; transform: translateY(40px); } 100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); } }

@keyframes pulse { to { opacity: 1; } }

/* FlowChart*/ .circleO { height: 60px; width: 60px; padding: auto; border-radius: 50%; background-color: rgba(230,230,230,1); color: black; z-index: 2; } .circleO img { max-height: 40px; width: auto; } .circleS { height: 60px; width: 60px; padding: auto; border-radius: 50%; background-image: linear-gradient(rgba(1,101,224,1), rgba(0,203,177,1)); color: black; z-index: 2; } .circleS img { max-height: 40px; width: auto; } .circleM { height: 100px; width: 100px; padding: auto; border-radius: 50%; background-image: linear-gradient(rgba(1,101,224,1), rgba(0,203,177,1)); color: black; z-index: 2; 1,101,224 } .circleM img { max-height: 80px; width: auto; } .circleL { height: 160px; width: 160px; padding: auto; border-radius: 50%; background-image: linear-gradient(rgba(1,101,224,1), rgba(0,203,177,1)); color: black; z-index: 2; } .circleL img { max-height: 130px; width: auto; }

conceptFlow h5{

font-weight: bold; font-size: 2rem; margin-bottom: 30px; color:#009ec6; }

conceptFlow span{

font-size: 1.5rem; } /* height of each section*/ .how-it-works.row{ height: 50vh } .how-it-works.row .col-3 { align-self: stretch; } .how-it-works.row .col-3::after { content: ""; position: absolute; border-left: 3px solid rgba(82, 187, 199,1); z-index: 1; } .diagnosis.row .col-3::after { content: ""; position: absolute; border-left: 3px dotted rgba(82, 187, 199,1); z-index: 1; } .how-it-works.row .col-3.bottom::after { height: 50%; left: 50%; top: 50%; } .how-it-works.row .col-3.full::after { height: 100%; left: calc(50% - 3px); } .how-it-works.row .col-3.fullRight::after { height: 100%; left: 50%; } .how-it-works.row .col-3.top::after { height: 50%; left: calc(50% - 3px); top: 0; border: 2px dotted rgba(82, 187, 199,1); }

.timeline div { padding: 0; height: 40px; } .timeline hr { border-top: 3px solid rgba(82, 187, 199,1); background-color: transparent; margin: 0; top: 17px; position: relative; } .timeline .col-3 { display: flex; overflow: hidden; } .timeline .corner { border: 3px solid rgba(82, 187, 199,1); width: 100%; position: relative; border-radius: 15px; } .timeline .top-right { left: 50%; top: -50%; } .timeline .left-bottom { left: -50%; top: calc(50% - 3px); } .timeline .top-left { left: -50%; top: -50%; } .timeline .right-bottom { left: 50%; top: calc(50% - 3px); }

/* Qoutes Part*/

warnPics {

height: auto; min-height: 20vw; font-weight: 100; }

warnPics .qoutes span{

font-size: 1.5rem; }

warnPics .qoutes{

}

qoute1 {

background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url(""); background-repeat: no-repeat; background-size: cover; background-position: center; color: #fff; }

qoute2 {

background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url(""); background-repeat: no-repeat; background-size: cover; background-position: center; color: #fff; }

qoute3 {

background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, .3), rgba(35, 35, 35, 1)), url(""); background-repeat: no-repeat; background-size: cover; background-position: top; color: #fff; }

whyTitle { background:rgba(35, 35, 35, 1); }

.warningContent span { font-size:2.5rem; font-weight:bold;}

.mobileText{ font-size:1.5rem !important; margin-top: 3rem; }

conceptFlowTitle {

font-size: 2.5rem; font-weight: bold; }

/* START PopUp STYLES */ .labelBox{

 display: inline;

} .reg {

 background-color: white;
 display: inline;
 margin: 0 auto;
 width: auto;
 font-size: 16.996px;
 line-height: 20px;
 padding: 12px 18px 13px;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -ms-border-radius: 6px;
 -o-border-radius: 6px;
 border-radius: 6px;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
 color: #009ec6;
 cursor: pointer;
 border: none;
 text-decoration: underline;

} .reg:hover {

 opacity: 0.8;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;

} .pop {

 display: none;
 position: absolute;
 top: 75%;
 max-width:100%;
 height: auto;
 -webkit-border-radius: 6px;
 -moz-border-radius: 6px;
 -ms-border-radius: 6px;
 -o-border-radius: 6px;
 border-radius: 6px;
 z-index: 200;
 padding: 10px;
 background-color: rgba(240, 240, 240, 1); 
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

} .pop > h1 {

 color: #009ec6;
 font-size: 100%;

} .pop > p {

 font-size: 100%;
 color: #777777;

} .pop > span {

 cursor: pointer;
 position: absolute;
 top: 10px;
 right: 10px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 color: #777777;
 width: 30px;
 height: 30px;

} /* END PopUp STYLES */

.mobileTitle { font-size: 3.5rem !important; } .readButton, .readButton:visited{ color:#17a2b8; } .readButton:hover { color:white; }

.showCase .row{ padding-left: 10vw; padding-right: 10vw; }

@media only screen and (max-width: 767.98px) {

videoBox #videoShow{

position: relative; right: 120%; }

PhactoryTitle {

font-size: 4rem; }

PhactoryText {

font-size: 1.5rem; } .warningContent span{ font-size: 1.5rem; }

warnPics .qoutes{

font-size: 1rem; }

compareBox img {

max-height: 20vh; width: auto; } .mobileTitle { font-size: 3rem !important; }

conceptFlowTitle {

font-size: 2rem; font-weight: bold; }

conceptFlow h5{

font-size: 1.5rem; }

conceptFlow span{

font-size: 1rem; }

.how-it-works.row{

   height: auto;

}

/* FlowChart*/ .circleO { height: 40px; width: 40px; } .circleO img { max-height: 25px; width: auto; } .circleS { height: 40px; width: 40px; } .circleS img { max-height: 25px; width: auto; } .circleM { height: 50px; width: 50px; } .circleM img { max-height: 35px; width: auto; } .circleL { height: 60px; width: 60px; } .circleL img { max-height: 45px; width: auto; } .reg { padding:0; } .mobileText{ font-size:1rem !important; margin-top: 0; } .showCase .row{ padding: 0; } }

@media only screen and (max-width: 991.98px) {}

@media only screen and (max-width: 1199.98px) {} </style>

   // Add smooth scrolling to all links
   $("#goTo").on('click', function(event) {

       // Make sure this.hash has a value before overriding default behavior
       if (this.hash !== "") {
           // Prevent default anchor click behavior
           event.preventDefault();

           // Store hash
           var hash = this.hash;

           // Using jQuery's animate() method to add smooth page scroll
           // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
           $('html, body').animate({
               scrollTop: $(hash).offset().top
           }, 800, function() {

               // Add hash (#) to URL when done scrolling (default click behavior)
               window.location.hash = hash;
           });
       } // End if
   });

});

$(document).ready(function () { $(".reg").click(function () {

$(".pop").fadeOut(100);
$(this).next().fadeIn(300);

});

$(".pop > span, .pop").click(function () {

$(".pop").fadeOut(300);

}); });

Welcome to CAU_China 2019!

The game is online<p> </div>

Team:CAU China

Welcome to CAU_China 2019!