p{
    font-size: 1.222rem;
    line-height: 1.777rem;
    font-weight: 300;
}
/*@import url('https://fonts.cdnfonts.com/css/stix-two-math');*/
body{
    font-family: "Roboto", sans-serif;    
}
*{
    margin: 0;
    padding: 0;
}
/* Navbar section */
.nav {
    z-index: 100;
    width: 100%;
    height: 65px;
    position: fixed;
    line-height: 65px;
    text-align: center;
}
.nav div.logo a:hover {
    color: #00E676;
}
.nav div.main_list {
    height: 65px;
    float: right;
}
.nav div.main_list ul {
    width: 100%;
    height: 65px;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav div.main_list ul li {
    width: auto;
    height: 65px;
    padding: 0;
    padding-right: 3rem;
}
.nav div.main_list ul li a {
    text-decoration: none;
    color: #000;
    line-height: 65px;
    font-size: 14pt;
    font-weight: 500;
}
.nav div.main_list ul li a:hover {
    color: #9b9a94;
}
/* Home section */

.navTrigger {
    display: none;
}
.nav {
    padding-top: 20px;
    padding-bottom: 20px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
/* Media qurey section */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .container {
        margin: 0;
    }
}
@media screen and (max-width: 600px) {
    .lang_icon{
            padding-left: 10%;
    }
    .col-sm-6 img {
        padding: 5PX 0 5PX 30PX;
    }
    .text-block2 {
        position: absolute;
        top: 1%;
        color: white;
        width: 40%;
        left: 1%;
        margin-left: -11%;
    }
    #img_bottom{
        padding-bottom: 10%;
    }
    .form-control {
    width: 90%;}
        #footer {
            padding-bottom: 5%;
        }
    .text-block1 {
        margin-top: -85%;
        color: white;
        width: 100%;
        margin-bottom: 15%;
    }
    .nav .container .logo a {
        float: left;
    }
    .home {
        width: 100%;
        background: #F9EC06;
        height: 700PX;
       /* background-image: url(data/img/Capture1001.png);*/
        background-position: center top;
        background-size: cover;
    }
    h1 {
        font-size: 12pt;
    }
    .nav .container .logo a img{
        WIDTH: 30%;
        FLOAT: LEFT;
    }
    
    .affix .container .logo a img{
        WIDTH: 40%;
        FLOAT: LEFT;
        padding-top: 2%;
    }
    .text-block {
        position: absolute;
        top: 10%;
        color: white;
    }
     .text-block3 {
        position: absolute;
        top: 47%;
        left: 30%;
        color: white;
        width: 20%;
    }
         .text-block4 {
             display:none;
        }
    .text-block .col-sm-6{
        padding-left: 3%;
    }

    .text-block  h2{
        font-size: 13pt;
        font-weight: 400;
        LINE-HEIGHT: 1.5;
    }
    .text-block  h1{
        font-size: 15pt;
        padding-top: 20%;
        color:black;
    }
    .div_slider .container1 .row , .div_slider1 .container1 .row{
        padding-top:12%;
    }
}

.div_slider{
    width: 100%;
   /* background-image: url(data/img/slider1.jpg);*/
    height: auto;
    background-size: cover;
    color:white;
}

    @media screen and (min-width: 600px) {
        #col-sm-3_2{
            padding-left: 3%;
        }
        .text-block {
            position: absolute;
            top: 40%;
            color: white;
        }
        .text-block1 {
            position: absolute;
            top: 20%;
            left: 50%;
            color: white;
            width: 45%;
        }
        
        .text-block2 {
            position: absolute;
            top: 2%;
            color: white;
            width: 8%;
        }
         .text-block3 {
            position: absolute;
            top: 82%;
            left: 30%;
            color: white;
            width: 8%;
        }
         .text-block4 {
            position: absolute;
            top: 20%;
            left: 38%;
            color: white;
            width: 4%;
        }
        .text-block .col-sm-6{
            padding-left: 14%;
        }
        
        .text-block  h2{
            font-size: 14pt;
            font-weight: 300;
            width: 80%;
            LINE-HEIGHT: 1.8;
            margin-top: 2%;
        }
        
        .text-block  h1{
            font-size: 20pt;
            color:black;
        }
        .nav .container .logo a {
            text-decoration: none;
            color: #fff;
            float: left;
            font-size: 2.5rem;
        }
        .home {
            width: 100%;
            background: #F9EC06;
            height: 900PX;
          /*  background-image: url(data/img/Capture1001.png);*/
            background-position: center top;
            background-size: cover;
        }
        h1 {
            font-size: 16pt;
        }
        
          #logo{
                height: 40%;
                float: left;
                WIDTH: 40%;
                padding-top: 1%;
            }
    }

.div_slider .row ,.div_slider1 .row{
          padding:2% 0 2% 0;
      }
@media screen and (max-width:768px) {
    

    .navTrigger {
        display: block;
    }
    .nav div.main_list {
        width: 100%;
        height: 0;
        overflow: hidden;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    }
    .nav div.show_list {
        height: auto;
        display: none;
    }
    .nav div.main_list ul {
        flex-direction: column;
        width: 100%;
        height: auto;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: #fff;
        /*same background color of navbar*/
        background-position: center top;
    }
    .nav div.main_list ul li {
        width: 100%;
        text-align: left;
    }
    .nav div.main_list ul li a {
        text-align: center;
        width: 100%;
        font-size: 14pt;
        padding: 20px;
    }
    .nav div.media_button {
        display: block;
    }
}

/* Animation */
/* Inspiration taken from Dicson https://codemyui.com/simple-hamburger-menu-x-mark-animation/ */

.navTrigger {
    cursor: pointer;
    width: 30px;
    height: 25px;
    margin: auto;
    position: absolute;
    right: 30px;
    top: 0;
    bottom: 0;
}
.navTrigger i {
    background-color: #000;
    border-radius: 2px;
    content: '';
    display: block;
    width: 100%;
    height: 4px;
}

.navTrigger i:nth-child(1) {
    -webkit-animation: outT 0.8s backwards;
    animation: outT 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(2) {
    margin: 5px 0;
    -webkit-animation: outM 0.8s backwards;
    animation: outM 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(3) {
    -webkit-animation: outBtm 0.8s backwards;
    animation: outBtm 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger.active i:nth-child(1) {
    -webkit-animation: inT 0.8s forwards;
    animation: inT 0.8s forwards;
}

.navTrigger.active i:nth-child(2) {
    -webkit-animation: inM 0.8s forwards;
    animation: inM 0.8s forwards;
}

.navTrigger.active i:nth-child(3) {
    -webkit-animation: inBtm 0.8s forwards;
    animation: inBtm 0.8s forwards;
}

@-webkit-keyframes inM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes inM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes outM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes outM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes inT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes inT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes outT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes outT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes inBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes inBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

@-webkit-keyframes outBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes outBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

.affix {
    padding: 0;
    background-image: linear-gradient(#fff, #efeded);
}
.myH2 {
	text-align:center;
	font-size: 4rem;
}
.myP {
	text-align: justify;
	padding-left:15%;
	padding-right:15%;
	font-size: 20px;
}
@media all and (max-width:700px){
	.myP {
		padding:2%;
	}
}


.container1{
    margin-top:7%;
}
.img_service{
    width: 20%;
    padding-bottom: 5%;
}
.col-sm-12 h1{
    font-size: 16pt;
}


.div_service{
    COLOR: #000;
    BACKGROUND: #fff;
    TEXT-ALIGN: center;
    WIDTH: 100%;
}
.animation_service_div_div:hover{
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

.animation_service_div_div{
    box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
    HEIGHT: 100%;
    PADDING: 5%;
}

/****  animation ***/

[data-animate-in] {
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease
}

[data-animate-in="up"] {
    transform: translate3d(0, 24px, 0)
}

[data-animate-in].in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transition: transform 0.6s ease, opacity 0.6s ease
}
.fade-in {
    opacity: 0;
    transition: opacity 1s ease
}
.page-loaded .fade-in,.page-loaded.fade-in {
    opacity: 1
}
.isSafari.isTouch [data-animate-in],.isSafari.isTouch [data-animate-in="up"] {
    opacity: 1;
    transition: none;
    transform: none
}


/****  -----------------------------*/

.div_slider .col-sm-4 img{
  animation: mymove 5s infinite;
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}

#footer{
    background: #F9EC06;
}
#footer .col-sm-3 p{
    font-size: 12pt;
}
p{
    font-size: 1rem;
}