:root {
   --main-button-padding: 5px 10px;
   --bg-default: rgba(0, 0, 0, .1);
 }
body { mwidth:100vw;}
.content { padding: 0px; color: #fff; background-image: url('../img/mttr.jpeg'); background-repeat: no-repeat; background-size: cover; background-position: bottom; background-attachment: fixed; }
.content .overlay { vertical-align: middle; background:rgba(255,255,255,0.8); color:#333;  display: block;  padding:calc(60vh - 160px) 10px; -webkit-transition:.5s all; transition:.5s all; }

#txt-rotation {  text-align: right; min-width:50%; font-weight: bold;  color:rgba(238,56,35,1); text-shadow:1px 1px 0px #000; }
  .overlay:hover  #txt-rotation { color:rgba(238,56,35,1); text-shadow:1px 1px 0px #000; }

  @media all and (max-width:700px){
    .content .overlay img { max-height:40vh; margin-top:-63px; display: block;}
    .content .overlay { max-height:calc(100vh - 100px); padding:calc(55vh - 73px) 10px; }
  }

.msm {  min-height:50vh; }

/* footer */
.footer,footer { font-size:.8em; color: #fff; }
.footer-copyright p { color: #fff; text-shadow: none;  }
a { text-decoration: none; color:skyblue; }

.flexcol.m4.feat { margin-left:1%; margin-right:1%; -ms-flex-preferred-size:30%; flex-basis:30%; }

.catbox {  padding: 1%; background-image: url('../img/mttr.jpeg'); background-attachment: fixed;background-repeat: no-repeat; background-size: cover; background-position: bottom; height: 25vh; color: #fff; }

.contents { padding: 10%; text-shadow:0px 1px 3px #333; }

.portfolio { color: #fff; background-image: url('../img/mttr.jpeg'); background-repeat: no-repeat; background-size: cover; background-position: bottom; background-attachment: fixed; }

.section { -webkit-box-shadow:0px 1px 2px 0px #ddd; box-shadow:0px 0px 0px 0px #ddd; }

.section h4 { color:#3a3a3a; text-shadow:0px 1px 2px #fff; }
.section p {  text-shadow:0px 1px 0px #fff; color:#555; }

.topbar { padding:0px;  background-image: url('../img/mttr.jpeg'); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; }
.topbar .overlay { display: -webkit-box; display: -ms-flexbox; display: flex; background:rgba(255,255,255,0.7); color:#333; padding:2em 1em 2em 1em; line-height:1.5em; font-size:2em; display: block;  -webkit-transition:.5s all; transition:.5s all; margin:0 auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; vertical-align: middle; }

@media all and (max-width:600px){
  .topbar span,#txt-rotation { text-align: center; white-space: pre-line; }
}

.teams { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; }

.tmember { background:rgba(255,255,255,.7); -webkit-transition:.5s all; transition:.5s all; -webkit-box-shadow:0px 0px 1px #ccc; box-shadow:0px 0px 1px #ccc;  }
.tmember:hover { -webkit-box-shadow:0px 0px 10px #999; box-shadow:0px 0px 10px #999; }
.tmember .photobox { overflow: hidden; width:100%; height:200px; text-align: center; vertical-align: middle;  background:rgba(0,0,0,0.1); margin-top:10px; }
.tmember img.photo {   -webkit-transition:.5s all;   transition:.5s all; height:200px; margin: 0 auto; }
.tmember:hover img.photo { -webkit-box-shadow:0px 2px 10px #999; box-shadow:0px 2px 10px #999; -webkit-transform:scale(1.1); transform:scale(1.1); }
.tmember h6 { display: block; font-size:1em; margin: 0 auto; text-align: center; }
.tmember h6 strong { font-weight: bold; text-align: center; }
.tmember .socialnav {  padding:0px; margin:0 auto; margin-bottom:10px; }
.tmember .tmcontent { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding:10px 10px;}


@media all and (max-width:768px){
  .tmember { margin-top:10px; background:rgba(255,255,255,.7); }
  .tmember:hover { -webkit-box-shadow:0px 0px 2px #ccc; box-shadow:0px 0px 2px #ccc; }
  .tmember:hover img.photo { -webkit-box-shadow:0px 2px 10px #999; box-shadow:0px 2px 10px #999;  }
  .tmember img.photo {  border:5px solid #fff; -webkit-box-shadow:0px 1px 3px #777; box-shadow:0px 1px 3px #777;margin-top:10px; max-height:150px; }
  .tmember .photobox { background:none;}
}


.tpat { background:rgba(255,255,255,.7); -webkit-transition:.5s all; transition:.5s all; -webkit-box-shadow:0px 0px 1px #ccc; box-shadow:0px 0px 1px #ccc;  }
.tpat:hover { -webkit-box-shadow:0px 0px 10px #999; box-shadow:0px 0px 10px #999; }
.tpat .photobox { overflow: hidden; width:100%; height:100px;  text-align: center; vertical-align: middle;   margin-top:10px; transition:.5s all; }
.tpat img.photo {   -webkit-transition:.5s all;   transition:.5s all;  width:90%; margin: 5px; }
.tpat:hover .photobox { -webkit-transform:scale(1.1); transform:scale(1.1); }
.tpat h6 { display: contents; font-size:1em; margin: 0 auto; text-align: left; }
.tpat h6 strong { font-weight: bold; }
.tpat .socialnav {  padding:0px; margin:0 auto; margin-bottom:10px; }
.tpat .tmcontent { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding:10px 10px; line-height:1em;}


@media all and (max-width:768px){
  .tpat { margin-top:10px; background:rgba(255,255,255,.7); }
  .tpat:hover { -webkit-box-shadow:0px 0px 2px #ccc; box-shadow:0px 0px 2px #ccc; }
  .tpat:hover img.photo {  }
  .tpat img.photo {  margin-top:10px; max-height:100px; width:auto; max-width:200px; }
  .tpat .photobox { background:none; min-height:150px; }
}



.newslist { text-align: center; background:rgba(255,255,255,.7); margin:5px auto; border-radius:5px; }
.newslist .bdg { display: flex; text-shadow:2px 2px 1px #777; padding:5px; color: white; border-radius:5px; text-align: center; vertical-align: middle; }
.newslist .picture img { height:100%; transition:1s all; }
.newslist:hover .picture img { transform:scale(2); }

/* Calender box */
.cldbox { margin:5px auto; display: flex; flex-direction: column; align-self: center; width:100%; text-align: center;  vertical-align: middle; border-radius:5px; overflow: hidden; }
.cldbox .day {   width:100%; min-height:40px; vertical-align: middle; padding:10px 0px; font-size:2.5em; line-height:40px;  }
.cldbox .month {  width:100%; padding:5px 0px; display: block; text-align: center; }
.newslist:hover .cldbox { box-shadow:0px 2px 5px #777; }

.newslist.wopic .cldbox { flex-direction: row; }
.newslist.wopic .cldbox .day {   width:100%; min-height:20px; vertical-align: middle; padding:10px 5px; font-size:1.2em; line-height:20px;  }
.newslist.wopic .cldbox .month {  width:100%; padding:5px 0px; display: block; text-align: center; font-size:.8em;}
.newslist.wopic .contents { line-height:50px; text-shadow: none; }


.newslist.wopic .picture { display: none; }
.newslist.wpic .picture { overflow: hidden; }
.newslist.wpic .picture img {  max-width:150px; max-height:100px; }

/* News */

.news { text-align: center; background:rgba(255,255,255,.7); margin:5px auto; border-radius:5px; }
.news h5 { cursor: pointer; }
.news .contents { line-height: auto; }
.news .contents p,.news .contents > div { padding:10px; }

/* Contact */
.contactbox { background:rgba(255,255,255,0.9); }

hr.plane {
border: 0;
height: 64px;
background-image: url(../img/paper-plane.png);
background-repeat: no-repeat;
background-position: center;
background-size: 42px 42px;
text-align: center;
}

hr.about {
border: 0;
height: 64px;
background-image: url(../img/about.png);
background-repeat: no-repeat;
background-position: center;
background-size: 52px 48px;
text-align: center;
}

hr.team {
border: 0;
height: 74px;
background-image: url(../img/team.png);
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
text-align: center;
}


hr.contact {
border: 0;
height: 100px;
background-image: url(../img/contact.png);
background-repeat: no-repeat;
background-position: center;
background-size: 100px 100px;
text-align: center;
}

hr.partner {
border: 0;
height: 64px;
background-image: url(../img/partner.png);
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
text-align: center;
}


hr.news {
border: 0;
height: 72px;
background: transparent;
background-image: url(../img/newspaper.png);
background-repeat: no-repeat;
background-position: center;
background-size: 72px 72px;
text-align: center;
}



hr.development {
border: 0;
height: 64px;
background-image: url(../img/development.png);
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
text-align: center;
}



hr.talk {
border: 0;
height: 64px;
background-image: url(../img/talk.png);
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
text-align: center;
}


.contact .flexrow {  -webkit-box-align: stretch;  -ms-flex-align: stretch;  align-items: stretch; }
.cbox {  border:1px dashed #eee;  color:#777;}
.cbox h5 { color:#ce4202; text-shadow:0px 1px 1px #fff; font-size:1em; margin-top:1em; }


a { font-weight: normal; color:#777; text-shadow: none; font-size:.9em; line-height:.5rem; }


.footer { padding-top:5vh; color:#555; border-top:1px solid rgba(0,0,0,0.1); }
.footer ul.nav { display: block; }
.footer ul.nav li { display:inline-block; padding:.4em; }

ul.socialnav { padding:15px; }
ul.socialnav li { display: inline-block; -webkit-transition:.1s all; transition:.1s all; }
ul.socialnav li:hover { -webkit-transform: scale(2); transform: scale(1.1); }




/* Form */
form { display: flex; flex-direction: column; width:70%; margin:0 auto; margin-bottom:2em; }
form p { margin:.7em 0px; }
label { display: block; font-size:1em; color:#777; }
form input,form textarea { display: block; flex:1; border:0px; border-bottom:1px dashed #eee;  outline:none; font-size:1em; padding-left:1em; }
.input-textarea label { flex:1; position: absolute; padding:.2em .2em .2em 0px; }
.input-textarea textarea { padding-top:2.5em; resize: vertical; }
.input-textarea textarea::placeholder { font-size:.7em; }






/* NAVBAR */

nav { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
nav .brand { font-weight: bolder; }
nav .brand img { max-height:70px; vertical-align: middle; }
nav ul { width: 100%; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-line-pack:center; align-content:center; vertical-align: middle; }
nav li { display: -webkit-box; display: -ms-flexbox; display: flex; vertical-align: middle; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
nav ul a { display: block; padding:.7em; color:rgba(0,0,0,0.5); background:inherit; font-size:1em; border-radius:.7rem; -webkit-transition:.1s color,1s background, .1s border-radius; transition:.1s color,1s background, .1s border-radius; margin-right:.3em; }
nav ul a:hover { color:rgba(255,255,255,1); background:rgba(145,145,145,1); border-radius:.7rem; text-shadow:0px 0px 1px #fff; }
nav .right-nav { -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end; }
nav .left-nav { -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start; }
nav .center-nav { -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }

nav ul.navbar { -webkit-box-flex:1; -ms-flex:1; flex:1; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-right:10px; text-align: center; }

/* Slider Navbar in small device */
@media all and (max-width: 767px){
  nav .navbar ul.brand { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
  nav .navbar ul:not(.brand) { display: grid; grid-auto-flow: column; justify-content: start; align-items: center; max-width:100vw;  overflow: hidden; overflow-y: hidden;  overflow-x: auto;}
  nav .navbar ul:not(.brand) a:hover { border-radius:3px 3px 0px 0px; }



}

/* --- */


/* Swipe Hand Guide Hand  */
.guide.swipehand { display: none; }
@keyframes swipehand {
    0% {
        right:0px;
        transform:scale(2);
    }

    10% {
        right:0px;
        transform:scale(2);
    }
    100% {
        right:70px;
        transform:scale(2);
    }
}

@media all and (max-width:600px){
.guide.swipehand {
  display: block;
  pointer-events: none;
  position: absolute;
  right:0px;
  top:6em;
  animation: swipehand 2s linear 1s 6 alternate-reverse;
}
.guide.swipehand img {
  display: block;
  height:70px;
}

}

.progressbadge {
    position: fixed; top:0px; right:35%;
    background:rgba(255, 255, 179,.9);
    display: block; padding:.2em;
    border-radius:0px 0px 5px 5px; border:1px solid rgba(230, 230, 0,0.9);
    font-size:.8em; color:#333;
    width:30%; margin:0 auto;
    text-align: center;
    height:auto; overflow: auto;

}

.progressbadge:empty {
  display:none;
}

.hide { display: none!important; visibility:hidden; }