html, body {
    overflow: auto;
    color: #000;
    text-align: left;
}

.js div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #000 url('../img/loader.gif') no-repeat center center;
background-size:2.5%; }


*:focus {
        outline: 0px !important;

}

img {
    width: 100%;
    height: auto;
}

.content-section{
    height: 100%
}



/*TIPOGRAFIA*/
h1 {
    font-family: 'rubiklight';
    font-size: 48pt;
    text-transform: uppercase;
    color: #fff;
}

h2 {
    font-family: 'rubikbold';
    font-size: 23pt;
    text-transform: uppercase;
    margin-bottom: 5%;
    line-height: 33pt;

}

h3 {
    font-family: 'rubiklight';
    font-size: 22pt;
    margin-top: 18%;
}

h4 {
    font-family: 'rubiklight';
    font-size: 15pt;
    letter-spacing: 7pt;
    margin-bottom: 2.5%;
    color: #F26F25;
}

h5 {
    font-family: 'rubikregular';
    font-size: 14pt;
    color: #ccc;
}

h6 {
    font-family: 'rubiklight';
    font-size: 10pt;
    text-align: right;
}


p {
    font-family: 'rubikregular';
    font-size: 13pt;
    letter-spacing: 0.5pt;
}

a:link { text-decoration:none;
    border-bottom: none;  }

a:hover { text-decoration:none;
    border-bottom: none;  }

button {
    font-family: 'aleoregular';
    font-size: 10pt;
    padding-bottom: 20px;
    padding-left: 0;
    border: none;
    border-bottom: #000 solid 1px;
    background: none;
    width: 50%;
    text-align: left;
    letter-spacing: 3pt;
    margin-top: 7%;
    outline: 0px;
    display: block;
}

button:hover {
    transition: 1s;
    color: #FCB514;
    cursor: pointer;
    display: block;
    text-decoration: none;
}


.button {
    font-family: 'aleoregular';
    font-size: 10pt;
    padding-bottom: 20px;
    padding-left: 0;
    border: none;
    border-bottom: #000 solid 1px;
    background: none;
    width: 100%;
    text-align: left;
    letter-spacing: 1pt;
    margin-top: 7%
    outline: 0px;

}



/*GENERAL*/
.section-margin {
    margin-top: 5%;
}

.nopadding {
    padding-left: 0;
    padding-right: 0;
}

.nomargin {
    margin-left: 0;
    margin-right:0;
}

.section-button {
    margin-top: 5%;
}

.section-button button {
    width: 50%;
    margin-top: 4%;
}


.section-button h2 {
    font-size: 18pt;
    line-height: 24pt;
}








/*NAVBAR*/
.navbar{
    z-index: 2;
}

.navbar-brand {
    padding-top: 0.5rem;
    padding-left: 50px;
}

.navbar-brand img {
    max-width: 50px;
    height: auto;
    width: 100%;
}

#hamburger {
    position: absolute;
    top: 25px;
    right: 3%;
    font-size: 25px;
}

.navbar ul {
    position: absolute;
    top: 40%;
    right: 5%;
    width: 100px;}

.navbar li {
    display: inline-block;
    cursor: pointer;
}

#index .navbar li {
    color: #fff;
}

.navbar li:first-child { padding-right: 15%;}


#myNav {
    overflow: hidden;
}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,1);
    overflow: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 13%;
    width: 100%;
    margin-top: 325x;
    overflow: hidden;
}

.overlay-content img {
    width: 100%;
}

.overlay .closebtn {
    position: absolute;
    top: 0px;
    right: 3.5%;
    font-size: 50px;
    color: #fff;
    text-decoration: none;
}


.brand-nav img {
    width: 40%;
    text-align: left;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 15%;
    }

    .nav-overlay {
        margin-top: 20%;
    }

    .nav-overlay li{

    font-family: 'rubiklight';
    font-size: 20pt;
    margin-top: 6%;
    color: #fff;
    text-decoration: none;
    letter-spacing: 3pt;
    text-align: left;
    list-style: none;
    }


            .nav-overlay a {text-decoration: none;}
            .nav-overlay a:hover, .nav-overlay li:hover{
                    text-decoration: none;
                    font-family: 'rubikbold';
                    }
    
    .overlay-content h5 {
    color: #666;
    font-size: 10pt;
    text-align: left;
}
  

.space { height: 10% }

.redes{ margin-right: 3%;}

.redes i:first-child {
    color: #fff;
}


.redes i:last-child {
    color: #000;
    font-size: 13pt;
}

.redes i:last-child:hover {
    color: #F16F25 !important;
    margin-top: 0;
    padding-top: 0;
    top: 0;
}


/*HOME*/


{
  background-color: #000;
  background-attachment: fixed;
  background-origin: initial;
  background-clip: initial;
  background-size: cover;
  background-repeat:no-repeat;
  background-position:center;
  position:relative;
  min-height:100%;
  z-index: 1;
    }



.text-home {
    padding-top: 27%;
    text-align: center;
    }

#home-h1 {
        font-family: 'rubikbold';
    }






/* Video Overlay */

#overlay {
height:100vh;
left:0;
position:relative;
top:0;
transition:background-color 300ms ease;
width:100%;
}

#overlay i {
    font-size: 22pt;
    color: #fff;
    }


/* Hero Video + Fallback */

#hero-vid {
backface-visibility:hidden;
background:url("../video/video.jpg") no-repeat scroll 0 0 #000;
background-size:cover;
bottom:0;
height:auto;
min-height:100%;
min-width:100%;
perspective:1000;
position:fixed;
right:0;
width:auto;
z-index:-1;
}

#content {
background-color:#fff;
position:relative;
z-index:1;
}



/* Media Queries */

@media only screen and (max-width:768px) {
    #overlay { height:auto; }
}


/* Visibility Helpers */

@media only screen and (min-width:769px) {
    .visible-mobile,.visible-tablet,.hidden-desktop { display:none !important; }
}

@media only screen and (min-width:480px) and (max-width:768px) {
    .visible-mobile,.hidden-tablet,.visible-desktop { display:none !important; }
}

@media only screen and (max-width:479px) {
    .hidden-mobile,.visible-tablet,.visible-desktop { display:none !important; }
}


/*WHAT WE DO*/

#whatwedo {
    padding-top: 10%;
    padding-bottom: 7%;
}

.skill{
    margin-bottom: 10%;
}

.skill:nth-child(2)  h3 {
     margin-top: 14%;
}




/*PORTFOLIO*/

#whatwehavedone {
    padding-bottom: 10%;
}

#whatwehavedone h4 {
    text-align: center;
}

#whatwehavedone h2 {
    text-align: center;
        margin-bottom: 9%;
}


#whatwehavedone p {
    text-align: center;
}


.view {
   height: 400px;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
   padding: 0;
}
.view .mask,.view .content {
    width: 100%;
   height: 400px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}




.view-tenth img {
    width: 100%;
    height: 100%;
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}


.port-text{
    width: 80%;
    margin-left: 10%;
}

.port-text-lg{
    width: 40%;
    margin-left: 30%;
}


.port-text h2{
       margin-top: 5%;
}

.port-text-lg h2{
        margin-top: 5%;
}

.view h4 {
       margin-top: 7%;
        color: #fff;

}

.view p {
       margin-top: 15%;
       color: #fff;

}


.view-tenth .mask {
    background-image: url(../img/portfolio-fondo.svg); 
    background-repeat: no-repeat;
    background-position: center;
   background-color: rgba(0, 0, 0, 0.7);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.5)";
   filter: alpha(opacity=0);
   opacity: 0;

}
.view-tenth h2 {
    margin-bottom: 2% !important;
   background: transparent;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   color: #fff;
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}



.view-tenth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
      
#whoweare-mobile {
    display: none;
}          


/*WHO OUR CLIENTS ARE*/


/************************************
MULTI ITEM CAROUSEL 1
************************************/

@media (min-width: 767px) and (max-width: 991px) {
  /* Show 4th slide on md  if col-md-4*/
    #multiplecarousel-1 .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }

}

@media (min-width: 576px) and (max-width: 767px) {
  /* Show 3rd slide on sm  if col-sm-6*/
    #multiplecarousel-1 .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }

    button {  width: 100%;}

}
@media (min-width: 576px) {

        button {  width: 100%;}

    
    #multiplecarousel-1 .carousel-item {
        margin-right: 0;
    }

    /* show 2 items */
    #multiplecarousel-1 .carousel-inner .active + .carousel-item {
        display: block;
    }
    
    #multiplecarousel-1 .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    #multiplecarousel-1 .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }

   #multiplecarousel-1 .carousel-inner .carousel-item-next {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    /* left or forward direction */
    #multiplecarousel-1 .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    } 
    
    /* farthest right hidden item must be abso position for animations */
    #multiplecarousel-1 .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* right or prev direction */
    #multiplecarousel-1 .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

/*MD*/
@media (min-width: 768px) {

    /* show 3rd of 3 item slide */
  #multiplecarousel-1 .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
 
    #multiplecarousel-1 .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
  
    
    #multiplecarousel-1 .carousel-inner .carousel-item-next {
      position: relative;
      transform: translate3d(0, 0, 0);
    }
    
    
    /* left or forward direction */
    #multiplecarousel-1 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* right or prev direction */
    #multiplecarousel-1 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}


/*LG */
@media (min-width: 991px) {

    /* show 4th item */
    #multiplecarousel-1 .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }
    
    #multiplecarousel-1 .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    
    /* Show 5th slide on lg if col-lg-3 */
    #multiplecarousel-1 .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
    
    /* left or forward direction */
    #multiplecarousel-1 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    
    /* right or prev direction //t - previous slide direction last item animation fix */
    #multiplecarousel-1 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }

}

/*LG 6th  -  if you want a carousel with 6 slides */
@media (min-width: 991px) {

        /* show 5th and 6th item */
 /*   .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }

    
  
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
      transition: none;
    }
*/
    
  
  /*show 7th slide for animation when its a 6 slides carousel */
 /*      .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item  + .carousel-item {
        position: absolute;
        top: 0;
        right: -16.666666666%;
        z-index: -1;
        display: block;
        visibility: visible;
  }
  */
  
      /* forward direction > */
 /*   .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
  */
      /* prev direction < last item animation fix */
 /*   .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
*/
}





/*WHAT WE ARE DOING*/

#whatwearedoing {
    border-top: #ccc solid 2px;
    border-bottom: #ccc solid 2px;
    margin-top: 5%;
    margin-bottom: 10%;
    padding-top: 4%;
    padding-bottom: 4%;
}



/*FOOTER*/

#footer-ask {
    background:url(../img/footer.jpg);
    padding-top: 3.5%;
    padding-bottom: 3.5%;
    background-repeat: no-repeat;
    background-size: cover;
}

#footer-ask h4 {
    text-align: center;
    margin-bottom: 1% !important;
    text-transform: uppercase;
    color: #fff;
}

#footer-ask h2 {
    text-align: center;
    margin-bottom: 3% !important;
    color: #fff;
}

#footer-ask button {
    text-align: center;
    margin: 0 41.5% !important;
    width: 17%;
    padding-top: 0;
    border-bottom: solid 1px #fff;
    color: #fff;
}

#footer-ask button:hover {
    color: rgb(252, 181, 20);}

.footer-info {
    padding-top: 2%;
    padding-bottom: 2%;
}


footer i {
    font-size: 20pt;
    line-height: 10pt;
    color: #000;
}

.footer-redes i:first-child {
    color: #000
}

.footer-redes i:last-child {
    color: #fff;
    font-size: 12pt;
}

.footer-redes i:last-child:hover {
    color: #FCB514;}

footer img {
    max-width: 150px;
    width: 100%;
    height: auto;
}

.footer-info li {
    display: inline-block;
    color: #666;
    margin-left: 4%;
    font-size: 12pt;
    float: right;
}

#datafiscal {   border-top: solid #ccc 1px;
                padding-top: 2%;
                margin-top: 3%;
                padding-top: 25px;
                margin-top: 25px;
                width: 100%;}

#datafiscal img { width: 40%;
                    margin-left: 30% }

/*****************************
****PG WHO WE ARE************/

#pg_whoweare h2 {
    margin-bottom: 0;
}

#pg_whoweare h6 {
    margin-bottom: 15%;
}


#header_whoweare img {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 5%;
    width: 100%;
    height: auto;
}

#team {
    margin-top: 10%;
    margin-bottom: 15%;
}
        
        #team div:first-child {
            margin-bottom: 7%;
            margin-top: 5%;
        }

        #team img {
            width:75%;
            margin-left: 12.5% }
        
        #team h3 {
            text-align: center;
            margin-top: 10%;
        }

        #team h5 {
            text-align: center;
            font-family: 'rubikbold';
            color: #000;
            margin-bottom: 8%;
            text-transform: uppercase;
            font-size: 12pt;

        }

        #team p {
            font-family: 'rubiklight';
            text-align: center;
        }

        #team button {
            width: 100%;
            text-align: center;
            text-transform: uppercase;
        }


/***********************************
********PG WHAT WE DO****************/

#pg_whatwedo h2 {
    margin-bottom: 0;
}

#pg_whatwedo h6 {
    margin-bottom: 15%;
}

#pg_skills {
    margin-top: 10%;
    margin-bottom: 10%;
}
        
        #pg_skills img {
            width:40%;}
        
        #pg_skills h3 {
            margin-top: 10%;
        }

        #pg_skills h4 {
            text-transform: uppercase;
            font-size: 13pt;
            letter-spacing: 0;
            text-align: left;
            line-height: 25pt;
            color: #000;

        }

        #pg_skills div:nth-child(n+3) {
            margin-top: 10%;
        }




/***************************************
***********WHAT WE HAVE DONE PROJECT***/

.content-project p {
    margin-bottom: 8%;
    margin-top: 4%;
}


.project-detail img {
    width: 75%;
    margin-left: 12.5%;
}


.project_img img {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 3%;
    width: 100%;
    height: 400px;
}

.text-detail {
    margin-top: 9%;
    margin-bottom: 10%;
}

.text-detail h6 {
    font-family: 'aleobold';
    font-size: 80pt;
}


/*****************************
***********CONTACT US******/

#whereweare {
    margin-bottom: 7%;
    margin-top: 7%;
}

#whereweare h2 {
    margin-bottom: 0;
}

#whereweare h4 {
    margin-bottom: 1%;
}

#contact-form{
    width: 100%;
    margin-top: 8%;
}

#contact_error {margin-top: 3%;
    font-size: 10pt;
    color: #F26F25;}

.form-control {
    display: block;
    width: 100%;
    height: 50px;
    padding: 25px 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border-bottom: solid 1pt #000;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-family: 'rubiklight';
    font-size: 12pt;
    color: #000;
    }

.form-control:focus {  ;
    background-color: #fff;
    border-bottom: #000 solid 1pt;
    outline: 0;
    box-shadow: none;
    outline: none;

    }

textarea {
    width: 100%;
    height: 255px !important;
    border-left: #000 solid 1pt;
    border-bottom: #000 solid 1pt;
    border-right: none;
    border-top: none;
    padding-left: 1rem;
    font-family: 'rubiklight';
    font-size: 12pt;
    color: #000;
}

textarea:focus { 
    background-color: #fff;
    border-bottom: #000 solid 1pt;
    outline: 0;
    box-shadow: none;
    }


.form_message {    border-left: #000 solid 1pt;
}


::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-family: 'aleoregular';
    font-size: 8pt;
    padding-bottom: 3%;
    padding-left: 0;
    border-top: none;
    background: none;
    width: 25%;
    text-align: left;
    letter-spacing: 1pt;
    margin-top: 7%;
    text-transform: uppercase;
    margin-left: 0;
    outline: 0px;}
::-moz-placeholder { /* Firefox 19+ */
    font-family: 'aleoregular';
    font-size: 8pt;
    padding-bottom: 3%;
    padding-left: 0;
    border: none;
    background: none;
    width: 25%;
    text-align: left;
    letter-spacing: 1pt;
    margin-top: 7%;
    text-transform: uppercase;
    margin-left: 0;
    outline: 0px;}
:-ms-input-placeholder { /* IE 10+ */
    font-family: 'aleoregular';
    font-size: 8pt;
    padding-bottom: 3%;
    padding-left: 0;
    border: none;
    background: none;
    width: 25%;
    text-align: left;
    letter-spacing: 1pt;
    margin-top: 7%;
    text-transform: uppercase;
    margin-left: 0;
    outline: 0px;}
:-moz-placeholder { 
    font-family: 'aleoregular';
    font-size: 8pt;
    padding-bottom: 3%;
    padding-left: 0;
    border: none;
    background: none;
    width: 25%;
    text-align: left;
    letter-spacing: 1pt;
    margin-top: 7%;
    text-transform: uppercase;
    margin-left: 0;
    outline: 0px;
} 



.text-muted {
    font-family: 'rubikitalic';
    font-size: 10pt;
    color: #000 !important;
}




/*****************************
**********MEDIA***************
*****************************/


@media (max-width: 1200px) {
  
    .skill:nth-child(-n+2) h3 {margin-top: 11%;}
    
    .view h4 {margin-top: 8%;}

    .view-tenth .mask {background-size: contain;}

       
        .view .mask, .view .content {height: 300px; }

        .view-tenth img {height: 300px;}

        #whatwehavedone { padding-bottom: 2%;}
    
    .navbar ul {right: 6%;}
    
    .navbar-brand {padding-left: 35px;}
    .footer-info { padding-top: 4%;padding-bottom: 4%; }
}



@media (max-width: 992px) {

    h1 {font-size: 35pt; }

    .w-100 {margin-left: 0;    width: 100% !important;}

    .carousel-indicators {    bottom: 10px; z-index: 200;}

    .carousel-inner {height: 250px;}

    .text-home { padding-top: 50%;}

    .content-section {margin-bottom: 10%}

    .skill h3 {text-align: center;}

    .skill:first-child { margin-top: 25%; }
    
    .skill img { width: 70%;
                margin-left: 15%;}

    .skill h3 {   margin-top: 5% !important;}

    .view h4 {margin-top: 7%;}

    .port-text-lg h4 {margin-top: 14%;}
    
    .port-text-lg h2 {margin-top: 10%;}
    
    .port-text-lg p {margin-top: 29.5%;}



    #footer-ask button {margin: 0 39% !important;
                    width: 22%;}

    .navbar-brand {padding-left: 25px;}

    .nav-img {  display: none !important;}

    .brand-nav img {
                width: 30%;
                text-align: left;
                margin-bottom: 5%;
            }

    #myNav {overflow: hidden;}

    #pg_whoweare h6 {margin-bottom: 8%;}

    #header_whoweare img {margin-bottom: 8%;}

    .section-button {margin-top: 8%;padding-left: 0;        margin-bottom: 2%;}
    
    #footer-ask {
    padding-top: 7%;
    padding-bottom: 7%;}
    
    .team { margin-top: 12% }
    .team:fist-child { margin-top: 0% }

    #pg_skills img {width: 60%;}

    textarea {margin-top: 5%}

    #contact_error {margin-top: 5%;}
}

@media (max-width: 992px) and (orientation:landscape) {
        #myNav {overflow: auto;}

}


@media (max-width: 768px) {

    .navbar ul { right: 8%;}

    .view h4 {margin-top: 11%;}

    #team h5 { margin-bottom: 7%; }

    .port-text-lg h4 {margin-top: 24%;}

    #footer-ask button {margin: 0 0% !important;
                 width: 100%;}
    button {width: 50%;}

    .text-home {  padding-top: 40%; padding-bottom: 20%;}

    #overlay {background:url("../video/video.jpg") no-repeat;
background-size: cover;}

    .navbar-brand {padding-left: 20px;}

    .footer-info {padding-top: 5%;padding-bottom: 5%;}
    .skill {text-align: center;}

    #pg_skills h4 {text-align: center;}

    #pg_whatwedo h6 {margin-bottom: 8%;}

    .skill img {    width: 70%;
    margin-left: 0%;}

    .section-button button {width: 100%;}

    #pg_skills img { width: 60%; margin-left: 20%;}

    #pg_skills h3 {margin-top: 5%;text-align: center;}

    #pg_skills div {margin-top: 10% !important;}

    #whoweare-mobile {
    display: block;          
    background-image: url(../img/whoweare-section.jpg); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-bottom: 25%;
    padding-top: 10%;
    padding-bottom: 10%;
        }
                #whoweare-mobile h2{ color: #fff; }
                #whoweare-mobile button{ color: #fff;
                                            border-bottom: #fff solid 1px; }

    #whatwehavedone{
        display: none;
    }


@media (max-width: 575px) {

    .navbar ul {right: 10%;}

    .navbar-brand {padding-left: 15px;}

    .port-text-lg {width: 60%;
    margin-left: 20%;}

    footer img {max-width: 250px}

    .footer-info ul {
      display: none}

    .view h4 {margin-top: 18%;}

    .port-text-lg h4 { margin-top: 24%;}

    .skill:nth-child(1) { margin-top: 15% }

    .section-button {padding-left: 15px;}

    .carousel-inner { height: auto; }

    .carousel-item img { width: 60% !important; margin-left: 20%; }

    .section-button button {width: 50%;}

    #myNav {overflow: hidden;}

    #whatwearedoing {  
    margin-top: 15%;
    margin-bottom: 20%;
    padding-top: 10%;
    padding-bottom: 10%;}

    button { width: 100%;}
    
     #footer-ask {
    padding-top: 15%;
    padding-bottom: 15%;}

    h1 { font-size: 30pt;}

    .text-home {   padding-top: 17%;    }

    .section-button button {width: 100%;}

    .nav-overlay {margin-top: 10%;}

}


@media (max-width: 575px) and (orientation:landscape) {
   #myNav {overflow: auto;}

   #whatwearedoing {      margin-top: 15%;
            margin-bottom: 20%;
            padding-top: 10%;
            padding-bottom: 10%;}

    button { width: 100%;}


    #footer-ask {
    padding-top: 15%;
    padding-bottom: 15%;}


    h1 { font-size: 30pt;}

    .text-home {padding-top: 17%;}

    .section-button button {width: 100%;}

    .nav-overlay {margin-top: 10%;}

}