@font-face {
    font-family: theFont;
    src: url("../fonts/Park Tech CG Light.ttf");
}

/*GENERAL*/
body {
    /*background-color: #0f0f0f;*/
    overflow-x: hidden;
    background-color: black;
}


.page-header {
    border-bottom: none;
}
#back_black {
    background-color: black;
    width: 101vw;
    margin-left: -3vw;
    padding-left: 3vw;
    box-shadow: 2px 2px 200px rgba(0, 0, 0, 0.9);
}

/*SECTION INTRO*/

#sec_intro {
    width: 100%;
    height: 100vh;
    background-color: black;
    /*border-bottom: #2aabd2 2px solid;*/
    overflow: hidden;
    background: url("../img/pw_maze_black.png") left top repeat;
}

.back_img {
    margin-left: 5%;
    margin-top: 10vh;
    filter: brightness(0.5);
    background-color: black;
    border-radius: 15px 0px 0px 0px;
    box-shadow: 2px 2px 250px rgba(0, 0, 0, 0.9);
    position: absolute;
    width: 110%;
    background-image: url("../img/back3.jpg");
    background-size: cover;
}

.back_img img {
    height: 95vh;
    width: 90%;
    margin-left: 10%;
    margin-top: 5vh;
    min-width: 400px;
}

#intro {
    position: absolute;
    z-index: 2;
    text-align: center;
    width: 95%;
    margin-top: 150px;
    color: whitesmoke;
    font-size: 50px;
    font-family: "Calisto MT";
}

#intro p {
    /*font-family: "Calisto MT";*/
    color: white;
    font-size: 50px;
}

#intro span {
    color: darkblue;
}

/*NAVIGATION BAR*/

.affix {
    top: 0;
}

#logo {
    width: inherit;
    height: 10vh;
    background-size: cover;
    border-bottom: transparent;
    margin-bottom: 1vh;
    margin-top: 1vh;
    padding-right: 50vw;
    /*background-color: #2aabd2;*/
}

#logo img {
    border-bottom: transparent;
}

.theNav {
    z-index: 999;
}

.navbar {
    border-bottom: #2aabd2 2px solid;
    background-color: #ffffff;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100vw;
}

.navbar-header {
    background-color: #ffffff;
    /*border-bottom: #2aabd2 2px solid;*/

}


nav ul {
    /*width: 100%;*/
    align-content: center;
    padding: auto;
    padding-top: 2vh;
    font-size: 20px;
    /*float: right;*/
   /* background-color: #2aabd2;*/
    color: #2aabd2;
}

.nav li {
    text-align: center;
    /*width: 100%;*/
    color: #2aabd2;

}

.nav li a {
    color: #2aabd2;
}

button .icon-bar {
    border-bottom: #2aabd2 2px groove;
}

button .navbar-toggle {
    border-color: #2aabd2;
}

/*.navbar-header .pull-left {
    margin-right: 90%;
}*/

/*.navbar-default .navbar-collapse{
    border-bottom: #2aabd2 2px solid;
}*/

/*.navbar-header {
    border-bottom: #2aabd2 3px solid;
}*/

/*SECTION ABOUT*/
#sec_about {
    background-color: white;
    padding-top: 15vh;
    padding-bottom: 10vh;
}

.about_cont {
    /*background-color: yellow;*/
    text-align: center;
    border: 1px #eee solid;
    word-wrap: break-word;
    /*margin-left: 2%;*/
}

.about_cont p {
    color: #5e5e5e;
}

#sec_about .row {
    /*background-color: #2aabd2;*/
    /*display: table;*/
    margin: 0 auto;
    align-content: center;
}

.page-header {
    text-align: center;
}

#sec_about img {
    width: 270px;
    height: 230px;
}

#sec_about .row .about_cont {
    border-top: none;
    border-bottom: none;
}

/*SECTION SERVICE*/
#sec_service {
    overflow: hidden;
}

#sec_service .page-header{
    color: #2aabd2;
    font-family: "Times New Roman";
    padding-top: 7vh;
    padding-bottom: 7vh;
    z-index: 2;
    position: relative;
}



.serv_cont {
    /*background-color: yellow;*/
    text-align: left;
    border: 1px #eee solid;
    word-wrap: break-word;
    font-family: sans-serif;
    border: none;
    overflow: hidden;
}

.serv_cont h4 {
    /*font-weight: bold;*/
    color: lightgrey;
}

.serv_cont p {
    color: #555555;
    text-align: left;
    margin-left: 2%;
}

.serv_cont img {
    width: 50px;
    height: 50px;
    background-size: cover;
    margin-top: 2vh;
}

.serv_ico {
    padding-right: 10%;
    align-content: center;
    text-align: center;
}

.ser-subcont {
    padding-bottom: 2vh;
}

#sec_service .back_img2 {
    filter: blur(1px) brightness(0.5);
    background-color: black;
    box-shadow: 2px 2px 250px rgba(0, 0, 0, 0.9);
    position: absolute;
    margin-left: 40%;
    margin-top: 30vh;
}

#sec_service .back_img2 img {
    height: 55vh;
    width: 80%;
    min-width: 350px;

}






/*SECTION CONTACT*/
#sec_contact {
    height: 90vh;
    padding-top: 5vh;
    /*border-top: #2aabd2 1px solid;*/
}

.contact_cont {
    /*background-color: yellow;*/
    text-align: center;
    border: 1px #eee solid;
    word-wrap: break-word;
    border: none;
}

#sec_contact .page-header{
    color: #2aabd2;
    font-family: "Times New Roman";
    padding-top: 7vh;
    padding-bottom: 7vh;
}





/*=======================INPUTS*/

html, body{
    /*background:#333;*/
    margin:0px;
    padding:0px;
    width:100%;
    height:100vh;
    font-family: 'Raleway', sans-serif;
    /*color:white;*/
}
a{
    color:white;
}
p{
    text-align:center;
    color:white;
}
.body{
    width:100%;
    height:200px;
    display:inline;
    z-index: 9;
    position: relative;
}
.container{
    max-width:800px;
    margin:auto;
    background: #1b6d85;
    padding:20px;
    box-sizing:border-box;
    box-shadow:0px 3px 6px rgba(0, 0, 0, 0.5);
    font-size:16px;
    border:1px solid #444;
    border-radius:3px;
    animation: 1.25s flyin ease;
}

.inputs{
    position:relative;
    float:left;
    width:100%;

    box-sizing:border-box;
    padding:10px 0px 10px 10px;
}
.inputs.half{ width:50%; }

.inputs input{
    width:100%;
    padding:20px 0px 4px 0px;
    background:transparent;

    box-sizing:border-box;
    border-color: #AAA;
    border-width: 0px 0px 2px 0px;
    color:white;
    outline:none;
    transition:all 0.3s;
    padding:0px 15px;
}

.inputs input:focus{
    border-bottom:2px solid #FFF;
}



.inputs input + label:after{
    content: " ";
}


.inputs input:placeholder-shown + label{
    color:#999;
    left:14px;
    bottom:-8px;
}
.inputs input:focus + label,
.inputs input + label{
    position:absolute;
    bottom:14px;
    left:10px;
    color:#999;
    line-height:60px;
    pointer-events:none;
    transition: all 0.25s;
    font-size:14px;
}

button{
    border:0px;
    padding:10px 40px;
    border-radius:3px;
    background:#2aabd2;
    color:white;
    float:right;
    font-weight:bold;
    border:1px solid transparent;
    transition:all 0.25s;
}
button:hover{
    border:1px solid #999;
}

/*@keyframes flyin{
    from{ transform: translateY(100%); opacity:0; }
}*/


/*SECTION credit*/
#sec_rights {
    height: 10vh;
    /*padding-top: 10vh;*/
}

#sec_rights .row {
    padding-top: 3vh;
}

#sec_rights p {
    color: #2aabd2;
    font-size: larger;
}

#sec_rights a {
    color: #2aabd2;
}



/*Animations*/

#s1 {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

#s1.fade-in {
    opacity: 1;
    transform: translateX(0);
}

#s2 {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
    transition-delay: 0.4s;
}

#s2.fade-in {
    opacity: 1;
    transform: translateX(0);
}

#s3 {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
    transition-delay: 0.7s;
}

#s3.fade-in {
    opacity: 1;
    transform: translateX(0);
}

#n1.top1 {
    position: fixed;
    top: 0;
    z-index: 10;
    -webkit-transform: translate3d(0,0,0);
}

#sec_service .page-header{
    opacity: 0;
    transform: translateY(-40px);
    transition: all 1s ease-out;
}

#sec_service .page-header.fade-in {
    opacity: 1;
    transform: translateY(0);
}

#sec_contact .page-header{
    opacity: 0;
    transform: translateY(-40px);
    transition: all 1s ease-out;
}

#sec_contact .page-header.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.frm_cont {
    opacity: 0;
    transition: all 2s ease-out;
}

.frm_cont.fade-in {
    opacity: 0.8;
    border-radius: 15px;
}

.ser-subcont {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

.ser-subcont.fade-in {
    opacity: 1;
    transform: translateX(0);
}

.ser-subcont2 {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

.ser-subcont2.fade-in {
    opacity: 1;
    transform: translateX(0);
}

.ser-subcont3 {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

.ser-subcont3.fade-in {
    opacity: 1;
    transform: translateX(0);
}

.ser-subcont4 {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

.ser-subcont4.fade-in {
    opacity: 1;
    transform: translateX(0);
}

.ser-subcont5 {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

.ser-subcont5.fade-in {
    opacity: 1;
    transform: translateX(0);
}

.ser-subcont6 {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

.ser-subcont6.fade-in {
    opacity: 1;
    transform: translateX(0);
}

.ser-subcont7 {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

.ser-subcont7.fade-in {
    opacity: 1;
    transform: translateX(0);
}

.ser-subcont8 {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

.ser-subcont8.fade-in {
    opacity: 1;
    transform: translateX(0);
}

.ser-subcont9 {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 1s ease-out;
}

.ser-subcont9.fade-in {
    opacity: 1;
    transform: translateX(0);
}



@media only screen and (max-width: 768px) {
    .serv_text {
        text-align: center;
        word-wrap: break-word;
    }

    .serv_text p {
        text-align: center;
        word-wrap: break-word;
    }
}


.demo a {
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #fff;
    font : normal 400 20px/1 'Josefin Sans', sans-serif;
    letter-spacing: .1em;
    text-decoration: none;
    transition: opacity .3s;
}
.demo a:hover {
    opacity: .5;
}



#section06 a {
    padding-top: 70px;
}
#sec_intro a span {
    position: absolute;
    margin-top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid blue;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    -webkit-animation: sdb06 1.5s infinite;
    animation: sdb06 1.5s infinite;
    box-sizing: border-box;
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
}
@-webkit-keyframes sdb06 {
    0% {
        -webkit-transform: rotateY(0deg) rotateZ(-45deg) translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
        opacity: 0;
    }
}
@keyframes sdb06 {
    0% {
        transform: rotateY(0deg) rotateZ(-45deg) translate(0, 0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
        opacity: 0;
    }
}



#scrollB {
    width: 10%;
    height: 7vh;
    margin-left: 50%;
    margin-top: 90vh;
    z-index: 10000;
    position: absolute;
}