@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,500,600,700,900&display=swap');

h1 {

    font-size: 36px;
    color: #892525;
    font-family: 'Roboto', sans-serif;
}

@media (max-width: 767.98px) {
    h1 {
        font-size: 20px;
    }
}

h2 {
    font-family: 'Roboto', sans-serif;
}

h3 {
    font-family: 'Roboto', sans-serif;
}

h4 {
    font-family: 'Roboto', sans-serif;
}

h5 {
    font-family: 'Roboto', sans-serif;
    color: #892525;
}

p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1.7em;
    color: #999;
}

a,
a:hover,
a:focus {
    font-weight: 400;
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

hr {
    border-top: 2px solid #892525;
    width: 40px;
    margin-left: calc(50% - 20px);
}

blockquote {
    font-family: 'Roboto', sans-serif;
    border-left: none;
    font-size: 14px;
    font-weight: 400;
}

.navbar {
    padding: 15px 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: none;
    z-index: 100;
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

.noscroll {
    overflow: hidden;
}

/*******************************************************
********************************************************
SIDEBAR STYLE
********************************************************
*******************************************************/

#sidebar {
    width: 280px;
    position: fixed;
    top: 0;
    left: -280px;
    height: 100vh;
    z-index: 99999;
    background: #232323;
    color: #fff;
    transition: all 0.3s;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.active {
    left: 0;
}

#dismiss {
    width: 95px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background: #892525;
    position: absolute;
    top: 15px;
    right: 0px;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#dismiss i {
    margin-left: 5px;
}

#dismiss:hover {
    background: #892525;
    color: #232323;
}

.overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none;
}

#sidebar .sidebar-header {
    padding: 20px;
    background: #232323;
}

#sidebar h1 {
    font-weight: 800;
    margin-top: 65px;
    margin-bottom: 0;
}

#sidebar h3 {
    font-weight: 400;
    margin-top: 0px;
}

#sidebar .btn-default {
    margin-left: calc(50% - 100px);
    position: absolute;
    bottom: 220px;
}

#sidebar .components {
    height: calc(100vh - 400px);
    overflow: scroll;
    overflow-x: hidden;
}

#sidebar ul.components {
    padding: 25px 0;
}

#sidebar ul.components i {
    float: right;
    margin-top: 4px;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

#sidebar ul li a {
    padding: 10px 20px;
    font-size: 1em;
    display: block;
    font-weight: 400;
    transition: ease-in-out all 0.5s;
}

#sidebar ul li a:hover {
    color: #892525;
    background: #fff;
    font-weight: 800;
    transition: ease-in-out all 0.5s;
}

#sidebar ul li.active > a,
a[aria-expanded="true"] {
    color: #fff;
    background: #892525;
    font-weight: 800;
}

a[data-toggle="collapse"] {
    position: relative;
}

a[aria-expanded="false"] i {
    transform: rotate(0deg);
    transition: ease-in-out all 0.3s;
}

a[aria-expanded="true"] i {
    transform: rotate(180deg);
    transition: ease-in-out all 0.3s;
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #232323;
}

ul.CTAs {
    background-color: #892525;
    padding: 20px;
    text-align: center;
    position: absolute;
    margin-bottom: 0px;
    bottom: 0;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

#sidebarCollapse .icon-bar {
    content: '';
    height: 4px;
    width: 26px;
    border-radius: 2px;
    transition: ease-in-out all 0.3s;
}

#sidebarCollapse .coloured {
    background-color: #892525;
}

.navbar-toggle {
    width: 95px;
    display: block;
    min-width: 80px;
    margin: 0;
    margin-right: 50px;
    float: left;
    border: none;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: transparent;
}

#sidebarCollapse:hover .icon-bar {
    background-color: #892525;
    transition: ease-in-out all 0.3s;
}

.navbar-toggle .menuspan {
    font-weight: 800;
    float: right;
    margin-top: -20px;
    padding-left: 10px;
    transition: ease-in-out all 0.3s;
}

.uncoloured-m {
    color: #FFF;
}

.coloured-m {
    color: #892525;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
}

.nav-social {
    float: right;
    right: 20px;
    position: absolute;
    height: 40;
}

.soc-uncol i,
.soc-col i {
    width: 30px;
    height: 30px;
    padding: 5px 10px;
    font-size: 18px;
    margin: 5px 7.5px;
    transition: ease-in-out all 0.2s;
}

.soc-uncol i {
    color: #FFF;
    transition: ease-in-out all 0.2s;
}

.soc-col i {
    color: #892525;
    transition: ease-in-out all 0.2s;
}

.soc-uncol i:hover {
    color: #892525;
    transition: ease-in-out all 0.2s;
}

.soc-col i:hover {
    color: #232323;
    transition: ease-in-out all 0.2s;
}

@media (max-width : 1679.98px) {
    #sidebar .components {
        height: calc(100vh - 400px);
        overflow: scroll;
        overflow-x: hidden;
    }
}

@media (max-width : 1189.98px) {
    #sidebar .components {
        height: calc(100vh - 400px);
        overflow: scroll;
        overflow-x: hidden;
    }
}

@media (max-width : 767.98px) {

    .soc-uncol i,
    .soc-col i {
        width: 20px;
        height: 20px;
        padding: 5px 10px;
        font-size: 16px;
        margin: 0px 5px;
        transition: ease-in-out all 0.2s;
    }

    #sidebar ul.components {
        padding: 25px 0;
        overflow: scroll;
        height: 365px;
        position: relative;
    }

}

/*******************************************************
********************************************************
BUTTONS STYLE
********************************************************
*******************************************************/

.btn-default {
    width: 200px;
    font-weight: 800;
    line-height: 25px;
    background-color: #892525;
    border-radius: 0px;
    border: none;
    transition: ease 0.2s;
}

.btn-default:hover {
    color: #FFF;
    border-radius: 0px;
    font-weight: 800;
    background-color: #892525;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
    transition: ease 0.2s;
}

.btn-default:active:hover,
.btn-default.active:hover,
.open > .dropdown-toggle.btn-default:hover,
.btn-default:active:focus,
.btn-default.active:focus,
.open > .dropdown-toggle.btn-default:focus,
.btn-default:active.focus,
.btn-default.active.focus,
.open > .dropdown-toggle.btn-default.focus {
    color: #FFF;
    border-radius: 0px;
    font-weight: 800;
    background-color: #892525;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
    transition: ease 0.2s;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    color: #FFF;
    border-radius: 0px;
    font-weight: 800;
    background-color: #892525;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
    transition: ease 0.2s;
}

.to_top_show {
    bottom: 60px;
    transition: ease 0.45s;
}

.to_top_hide {
    bottom: -70px;
    transition: ease 0.45s;
}

#to-top-btn {
    position: fixed;
    width: 43px;
    height: 43px;
    border-radius: 5px;
    right: 60px;
    z-index: 99;
    background-color: #232323;
    color: #FFF;
    outline: none;
    border: 2px solid #892525;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.20);
}

#to-top-btn:hover {
    position: fixed;
    width: 43px;
    height: 43px;
    border-radius: 5px;
    right: 60px;
    z-index: 99;
    background-color: #892525;
    color: #FFF;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.35);
}

/*******************************************************
********************************************************
LINK STYLE
********************************************************
*******************************************************/

.in-link,
.ex-link {
    color: #999;
    font-weight: 400;
}

.in-link:hover,
.ex-link:hover {
    color: #892525;
    font-weight: 800;
}

/*******************************************************
********************************************************
CONTENT STYLE
********************************************************
*******************************************************/

#content {
    width: 100%;
    padding: 0px;
    min-height: 100vh;
    transition: all 0.3s;
    position: absolute;
    top: 0;
    right: 0;
}

section {
    padding: 250px 15px;
    position: relative;
    border: none;
    box-shadow: none;
    background-color: #FFF;

}

/*******************************************************
********************************************************
LANDING STYLE
********************************************************
*******************************************************/

section#landing {
    background-color: transparent;
    padding: 0px;
    height: 90vh;
    text-align: center;
    position: relative;
}

#landing .caption {
    position: absolute;
    top: 40%;
    transform: translateY(-40%);
    bottom: initial;
    z-index: 992;
    width: 40%;
    left: 30%;
}

#landing .landing-overlay {
    display: block;
    position: relative;
    width: 100%;
    height: 90vh;
    z-index: 0;
    background-color: #000;
    background-clip: rgba(0, 0, 0, 0.7);
    opacity: 0.5;
    top: 0;
}

#landing h1 {
    font-size: 60px;
    font-weight: 800;
    color: #FFF;
    margin: 0;
}

#landing h2 {
    font-size: 40px;
    font-weight: 200;
    color: #FFF;
    margin: 10px 0px;
}

#landing h4 {
    font-weight: 400;
    color: #FFF;
    margin-bottom: 35px;
    text-transform: uppercase;
}

.landing_block {
    width: 100%;
    height: 100%;
    float: right;
    right: 0;
    bottom: 0px;
    content: '';
    background: transparent;
    padding: 0;
    z-index: 2;
    overflow: hidden;
    position: absolute;
}

.landing_block::after {
    content: '';
    width: 150%;
    height: 35%;
    background: #FFF;
    position: absolute;
    z-index: 0;
    margin-left: 0;
    margin-bottom: 0;
    right: 0;
    bottom: -180px;
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    opacity: 1;
    box-shadow: 0px 10px 10px -9px rgba(0, 0, 0, 0.5);
}

#landing .btn-default {
    border: 1px solid #892525;
    margin-left: 7.5px;
    transition: ease-in-out all 0.2s;
}

#landing .btn-invert {
    background-color: transparent;
    border: 1px solid #FFF;
    margin-right: 7.5px;
    font-weight: 800;
    transition: ease-in-out all 0.2s;
}

#landing .btn-invert:hover {
    font-weight: 800;
    transition: ease-in-out all 0.2s;
    transform: scale(1.05);
}

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

    section#landing {
        height: 100vh;
    }

    #landing .caption {
        top: 45%;
        width: 80%;
        left: 10%;
    }

    #landing .landing-overlay {
        height: 100vh;
    }

    #landing h1 {
        font-size: 40px;
    }

    #landing h2 {
        font-size: 30px;
    }

    #landing h4 {
        color: #FFF;
        margin-bottom: 35px;
        font-size: 20px;
    }

    #landing .btn-default {
        margin-left: 0px;
        margin-bottom: 15px;
    }

    #landing .btn-invert {
        margin-right: 0px;
    }

    .landing_block::after {
        display: none;
    }
}

/*******************************************************
********************************************************
CREW STYLE
********************************************************
*******************************************************/

section#crew {
    padding: 0px 0px 0px 0px;
    background-color: transparent;
    position: relative;
    z-index: 5;
}

#crew .crewpanel {
    width: calc(100% + 30px);
    height: 300px;
    background-color: transparent;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: -15px;
    margin-right: -15px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    transition: ease-in-out all 0.3s;
}

#crew .crewpanel .btn {

    background-color: #232323;

}

#crew .crewpanel .crewoverlay {

    width: 100%;
    height: 300px;
    background-color: rgba(0, 0, 0, 0);

}

#crew .crewpanel:hover {
    transition: ease-in-out all 0.3s;
    cursor: auto;
}

#crew .crewpanel-footer {
    width: 200px;
    height: 60px;
    background-color: rgba(137, 37, 37, 0);
    position: absolute;
    bottom: calc(50% - 30px);
    left: calc(50% - 100px);
    overflow: hidden;
    text-align: center;
    transition: ease-in-out all 0.3s;
}

#crew .crewpanel:hover .crewpanel-footer {
    width: 100%;
    height: 300px;
    left: 0px;
    bottom: 0px;
    background-color: rgba(137, 37, 37, 0.7);
    transition: ease-in-out all 0.3s;
}

#crew .crewpanel-footer h5 {
    color: #FFF;
    font-size: 22px;
    font-weight: 800;
    margin: 25px 0px 25px 0px;
    width: 100%;
    transition: ease-in-out all 0.3s;
    opacity: 1;
}

#crew .crewpanel:hover .crewpanel-footer h5 {
    color: #FFF;
    font-size: 18px;
    font-weight: 800;
    margin: 105px 0px 25px 0px;
    opacity: 1;
    transition: ease-in-out all 0.3s;
}

#crew .crewpanel-footer p {
    color: #FFF;
    font-size: 10px;
    line-height: 20px;
}

#crew .crewpanel-footer p strong {

    font-weight: 500;
    text-transform: uppercase;
    font-size: 14px;

}

#crew .btn-invert {
    background-color: #FFF;
    color: #892525;
    margin-top: 5px;
    opacity: 1;
}

#toptechs_info_content .panel {
    background-color: #fff;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
}

#toptechs_info_content .panel-header {
    height: 120px
}

#toptechs_info_content .panel .paneloverlay {

    position: absolute;
    width: calc(100% - 32px);
    height: 120px;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;

}

#toptechs_info_content .panel-header h2 {
    margin: 0;
    padding-top: 48px;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    z-index: 40;
}

#toptechs_info_content .panel-body {}

#toptechs_info_content .panel-body li {

    margin-bottom: 10px;

}

#toptechs_info_content .panel-body li i {

    color: #892525;
    margin-right: 10px;
    font-size: 10px;
    margin-top: -12px;
    padding: 0;

}

#crew .cp1,
#crew .cp2,
#crew .cp3,
#crew .cp4,
#crew .cp5,
#crew .cp6,
#crew .cp7,
#crew .cp8,
#crew .cp9,
.p1,
.p2,
.p3,
.p4,
.p5,
.p6,
.p7,
.p8,
.p9 {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

#crew .cp1,
.p1 {
    background-image: url(../images/crew_addepartment.jpg);
}

#crew .cp2,
.p2 {
    background-image: url(../images/crew_ditvto2.jpg);
}

#crew .cp3,
.p3 {
    background-image: url(../images/crew_grips.jpg);
}

#crew .cp4,
.p4 {
    background-image: url(../images/crew_lighting.jpg);
}

#crew .cp5,
.p5 {
    background-image: url(../images/crew_makeup.jpg);
}

#crew .cp6,
.p6 {
    background-image: url(../images/crew_unit.jpg);
}

#crew .cp7,
.p7 {
    background-image: url(../images/crew_production_2.jpg);
}

#crew .cp8,
.p8 {
    background-image: url(../images/crew_production.jpg);
}

#crew .cp9,
.p9 {
    background-image: url(../images/crew_production_2.jpg);
}

#crew .cp3,
#crew .cp4 {


    height: 600px;

}

#gfix .crewpanel:hover .crewpanel-footer,
#lfix .crewpanel:hover .crewpanel-footer {


    height: 600px;


}

#crew .masonry1,
#crew .masonry2 {

    margin-top: -300px;

}

.modal-dialog {
    width: 60vw;
    height: calc(100vh - 60px);
    margin: 30px auto;
}

#crew .modal-content {
    height: calc(100vh - 60px);
    border-radius: 0px;
    border: none;
    overflow-y: scroll;
}

#crew .modal-header {
    padding: 0;
    text-align: left;
    border: none;
    background-color: transparent;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 150px;
    overflow: hidden;
}

#crew .mh-overlay {
    display: block;
    position: absolute;
    width: 100%;
    height: 150px;
    z-index: 0;
    background-image: linear-gradient(-90deg, rgba(137, 37, 37, 0), rgba(137, 37, 37, 0.99));
    opacity: 0.8;
    top: 0;
}

#crew .mh-heading {
    z-index: 99999;
    float: left;
    position: absolute;
}

#crew .modal-header h1 {
    color: #FFF;
    margin: 45px 0px 0px 45px;
    font-weight: 900;
    font-size: 26px;
}

#crew .modal-header h2 {
    color: #FFF;
    margin: 10px 0px 0px 45px;
    font-weight: 200;
    text-transform: uppercase;
    font-size: 18px;
}

#crew .modal-header .btn-default {
    float: right;
    text-transform: uppercase;
    font-size: 10px;
    height: 30px;
    line-height: 20px;
    width: 81px;
    top: 15px;
    right: 15px;
    position: absolute;
    font-weight: 900;
    padding: 5px;
    z-index: 99999;
}

#crew .modal-header .btn-default i {
    margin-left: 15px;
}

#crew .modal-body {
    text-align: center;
    padding: 15px 15px 60px 15px;
}

#crew .modal-body .c-img {
    margin-left: calc(50% - 70px);
    margin-top: 45px;
    margin-bottom: 30px;
    width: 140px;
    height: 140px;
    background-color: red;
}

#crew #addept-m .modal-header {
    background-image: url(../images/crew_addepartment.jpg);
}

#crew #focus-m .modal-header {
    background-image: url(../images/crew_ditvto2.jpg);
}

#crew #ditvto-m .modal-header {
    background-image: url(../images/crew_ditvto.jpg);
}

#crew #grips-m .modal-header {
    background-image: url(../images/crew_grips.jpg);
}

#crew #lighting-m .modal-header {
    background-image: url(../images/crew_lighting.jpg);
}

#crew #unit-m .modal-header {
    background-image: url(../images/crew_unit.jpg);
}

#crew #makeup-m .modal-header {
    background-image: url(../images/crew_makeup.jpg);
}

#crew #production-m .modal-header {
    background-image: url(../images/crew_production.jpg);
}


#crewcta {

    text-align: center;
    padding: 60px 15px 0px 15px;

}

#crewcta .row {

    margin-left: 15px;
    margin-right: 15px;

}

#crewcta .ctaleft {

    text-align: center;

}

#crewcta .ctaright {

    text-align: center;

}

#crewcta .cpacta {

    padding: 60px 0 45px 0;

}


@media (max-width : 767.98px) {

    section#crew {
        margin-top: 0px;
        padding: 0px 0px 0px 0px;
        text-align: center;
    }

    #crew .container,
    #crewcta .container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    #crew .crewpanel {
        width: calc(100% + 30px);
        margin-left: -15px;
        height: 180px;
        background-color: transparent;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
        transition: ease-in-out all 0.3s;
    }

    #crew .crewpanel .btn {

        background-color: #892525;

    }

    #crew .crewpanel:hover .btn {

        background-color: #232323;

    }

    #crew .crewpanel .crewoverlay {
        width: 100%;
        height: 180px;
        background-color: rgba(0, 0, 0, 0);
        transition: ease-in-out all 0.3s;
    }

    #crew .crewpanel:hover {
        height: 180px;
        transition: ease-in-out all 0.3s;
    }

    #crew .crewpanel:hover .crewoverlay {
        height: 180px;
    }

    #crew .crewpanel-footer {
        top: 0;
        width: 100%;
        height: 180px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.45);
    }

    #crew .crewpanel:hover .crewpanel-footer {
        width: calc(100% - 0px);
        height: 180px;
    }

    #crew .crewpanel-footer h5 {
        float: left;
        font-weight: 800;
        font-size: 20px;
        margin-top: 40px;
        color: #FFF;
    }

    #crew .crewpanel:hover .crewpanel-footer h5 {
        float: left;
        font-weight: 800;
        font-size: 20px;
        margin-top: 40px;
    }

    #crew .btn-invert {
        width: 70px;
        height: 30px;
        line-height: 18px;
        right: 16px;
        top: 10px;
        position: absolute;
    }

    #crew .cp3,
    #crew .cp4 {


        height: 180px;

    }

    #crew .masonry1,
    #crew .masonry2 {

        margin-top: 0;

    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {

    #crew .cp3,
    #crew .cp4 {


        height: 300px;

    }

    #crew .masonry1,
    #crew .masonry2 {

        margin-top: 0;

    }

}

/*******************************************************
********************************************************
ABOUT US STYLE
********************************************************
*******************************************************/

section#aboutus {
    padding: 0px 0px;
    min-height: 100vh;
    text-align: center;
    background-color: transparent;
    position: relative;
}

#aboutus img {

    width: 40%;
    margin-left: 30%;
    margin-top: -90px;

}

#aboutus .about-overlay {
    display: block;
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 0;
    background-color: #892525;
    background-clip: #892525;
    opacity: 0.8;
    top: 0;
}

#aboutus .caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    bottom: initial;
    z-index: 1300;
    width: 60%;
    left: 20%;
}

#aboutus h1 {
    text-transform: uppercase;
    font-weight: 800;
    color: #FFF;
    margin-top: -5px;
}

#aboutus h2 {
    color: #FFF;
    text-transform: uppercase;
    font-weight: 400;
}

#aboutus p {
    color: #FFF;
    font-weight: 300;
}

@media (max-width : 767.98px) {

    section#aboutus {
        padding: 0px 0px;
        height: 900px;
    }
    
    #aboutus img {

    width: 80%;
    margin-left: 10%;
    margin-top: -90px;

}

    #aboutus .about-overlay {
        height: 900px;
    }

    #aboutus .caption {
        width: 80%;
        left: 10%;
    }
}

@media (max-width : 325px) {

    section#aboutus {
        padding: 0px 0px;
        height: 900px;
    }

    #aboutus .about-overlay {
        height: 900px;
    }

    #aboutus .caption {
        width: 80%;
        left: 10%;
    }
}

/*******************************************************
********************************************************
CTA STYLE
********************************************************
*******************************************************/

section#cta {
    padding: 20px 15px 100px 15px;
    min-height: 10px;
    text-align: center;
    background-color: #000;
}

#cta img {

    width: 40%;
    margin-left: 30%;

}

#cta h1 {
    text-transform: uppercase;
    font-weight: 800;
    color: #FFF;
}

#cta h4 {
    color: #FFF;
    font-weight: 300;
    margin-bottom: 35px;
}

@media (max-width : 767.98px) {

    section#cta {
        padding: 30px 15px 50px 15px;
    }
    
    #cta img {

    width: 80%;
    margin-left: 10%;

}

    section#cta .container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*******************************************************
********************************************************
GALLERY STYLE
********************************************************
*******************************************************/

section#gallery {
    min-height: 10px;
    padding: 0;
}

#gallery .col-clear {
    padding: 0;
}

#gallery .gal {
    height: 320px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 0;
}

#gallery .gal .g1:hover,
#gallery .gal .g2:hover,
#gallery .gal .g3:hover,
#gallery .gal .g4:hover,
#gallery .gal .g5:hover,
#gallery .gal .g6:hover,
#gallery .gal .g7:hover,
#gallery .gal .g8:hover {
    transform: scale(1.2);
    transition: ease-in-out all 0.4s;
}

#gallery .g1 {
    height: 320px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/toptechs_g1.jpg);
    transform: scale(1);
    transition: ease-in-out all 0.2s;
}

#gallery .g2 {
    height: 320px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/toptechs_g2.jpg);
    transform: scale(1);
    transition: ease-in-out all 0.2s;
}

#gallery .g3 {
    height: 320px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/toptechs_g3.jpg);
    transform: scale(1);
    transition: ease-in-out all 0.2s;
}

#gallery .g4 {
    height: 320px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/toptechs_g4.jpg);
    transform: scale(1);
    transition: ease-in-out all 0.2s;
}

#gallery .g5 {
    height: 320px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/toptechs_g5.jpg);
    transform: scale(1);
    transition: ease-in-out all 0.2s;
}

#gallery .g6 {
    height: 320px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/toptechs_g6.jpg);
    transform: scale(1);
    transition: ease-in-out all 0.2s;
}

#gallery .g7 {
    height: 320px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/toptechs_g7.jpg);
    transform: scale(1);
    transition: ease-in-out all 0.2s;
}

#gallery .g8 {
    height: 320px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../images/toptechs_g8.jpg);
    transform: scale(1);
    transition: ease-in-out all 0.2s;
}

@media (max-width : 767.98px) {

    #gallery .gal {
        height: 140px;
    }

    #gallery .gal .g1:hover,
    #gallery .gal .g2:hover,
    #gallery .gal .g3:hover,
    #gallery .gal .g4:hover,
    #gallery .gal .g5:hover,
    #gallery .gal .g6:hover,
    #gallery .gal .g7:hover,
    #gallery .gal .g8:hover {
        transform: scale(1.2);
        transition: ease-in-out all 0.4s;
    }

    #gallery .g1,
    #gallery .g2,
    #gallery .g3,
    #gallery .g4,
    #gallery .g5,
    #gallery .g6,
    #gallery .g7,
    #gallery .g8 {
        height: 140px;
    }
}

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

section#contactus {
    padding: 100px 15px;
    min-height: 10px;
    text-align: center;
}

#contactus .panel {
    margin-top: 65px;
    background-color: #232323;
    border-radius: 0px;
    transition: ease-in-out all 0.2s;
}

#contactus .panel-header {
    background-color: transparent;
    border-radius: 0px;
    padding: 15px 0px 0px 0px;
    transition: ease-in-out all 0.2s;
}

#contactus .panel-body {
    background-color: transparent;
    padding: 15px;
    min-height: 10px;
    transition: ease-in-out all 0.2s;
}

#contactus .panel-footer {
    border-radius: 0px;
    background-color: transparent;
    border: none;
    padding-bottom: 15px;
    transition: ease-in-out all 0.2s;
}

#contactus .panel-body hr {
    border-top: 2px solid #892525;
    width: 40px;
    margin-left: calc(50% - 20px);
    margin-top: 0;
    margin-bottom: 0;
    transition: ease-in-out all 0.2s;
}

#contactus .panel i {
    color: #FFF;
    font-size: 25px;
    width: 25px;
    height: 25px;
    transition: ease-in-out all 0.2s;
}

#contactus .panel h5 {
    color: #FFF;
    margin: 15px 0px 15px 0px;
    transition: ease-in-out all 0.2s;
}

#contactus .panel p {
    color: #FFF;
    font-size: 12px;
    margin: 0;
    transition: ease-in-out all 0.2s;
    font-weight: 400;
}

#contactus .panel:hover {
    background-color: #892525;
    transition: ease-in-out all 0.2s;
}

#contactus .panel:hover .panel-body hr {
    border-top: 2px solid #FFF;
    transition: ease-in-out all 0.2s;
}

@media (max-width : 767.98px) {

    section#contactus {
        padding: 30px 0px;
    }

    #contactus .container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    #contactus .panel {
        width: 80%;
        margin-left: 10%;
        margin-top: 0px;
        transition: ease-in-out all 0.2s;
    }

    #contactus p {
        margin-bottom: 60px;
    }
}

/*******************************************************
********************************************************
FOOTER STYLE
********************************************************
*******************************************************/

section#footer {
    background-color: #232323;
    padding: 100px 15px;
    min-height: 10px;
    text-align: center;
}

#footer h1 {
    margin: 0;
    font-weight: 800;
}

#footer h4 {
    font-size: 17.5px;
    color: #FFF;
    font-weight: 400;
}

#footer a {
    font-size: 25px;
    padding: 10px;
}

#footer i {
    padding: 10px;
    margin-top: 25px;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: 2px solid #fff;
    transition: ease-in-out all 0.3s;
}

#footer a:hover i {
    color: #892525;
    border: 2px solid #892525;
    transition: ease-in-out all 0.3s;
}

@media (max-width: 599px) {

    section#footer {
        padding: 50px 15px;
    }

    #footer a {
        padding: 0px;
    }

    #footer i {
        transform: scale(0.75);
    }
}

/*******************************************************
********************************************************
TRADEMARK STYLE
********************************************************
*******************************************************/

section#trademark {
    background-color: #232323;
    padding: 0px 15px;
    min-height: 10px;
}

#trademark .container {
    padding-top: 15px;
    padding-bottom: 5px;
    border-top: 2px solid #892525;

}

#trademark p,
#trademark a {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

#trademark a:hover {
    color: #892525;
    font-size: 12px;
    font-weight: 800;
}

#trademark .t1,
.t2 {
    text-align: left;
}

#trademark .t3,
.t4,
.t5 {
    text-align: right;
}

@media (max-width: 599px) {

    section#trademark {
        text-align: center;
    }

    #trademark .container {
        width: 100%;
        padding: 50px 0px;
    }

    #trademark .t1,
    #trademark .t2,
    #trademark .t3,
    #trademark .t4,
    #trademark .t5 {
        text-align: center;
    }
}

@media (min-width: 600px) and (max-width: 767.98px) {

    #trademark .container {
        width: 100%;
        padding: 50px 0px;
    }

    #trademark .t1,
    #trademark .t2,
    #trademark .t3,
    #trademark .t4,
    #trademark .t5 {
        text-align: center;
    }
}

@media (max-width: 991.98px) {

    #trademark .container {
        width: 100%;
    }
}

/*******************************************************
********************************************************
INFO PAGES STYLE
********************************************************
*******************************************************/

section#toptechs_info {
    background-color: transparent;
    padding: 0px;
    height: 500px;
    text-align: center;
    position: relative;
}

#toptechs_info .caption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    bottom: initial;
    z-index: 992;
    width: 40%;
    left: 30%;
}

#toptechs_info .landing-overlay {
    display: block;
    position: relative;
    width: 100%;
    height: 500px;
    z-index: 0;
    background-color: #000;
    background-clip: rgba(0, 0, 0, 0.7);
    opacity: 0.5;
    top: 0;
}

#toptechs_info h1 {
    font-size: 60px;
    font-weight: 800;
    color: #FFF;
    margin: 0;
}

#toptechs_info h2 {
    font-size: 40px;
    font-weight: 200;
    color: #FFF;
    margin: 10px 0px;
}

#toptechs_info h4 {
    font-weight: 400;
    color: #FFF;
    margin-bottom: 35px;
}

section#toptechs_info_content {
    background-color: #FFF;
    padding: 65px 15px 15px 15px;
    height: 100%;
    text-align: left;
    position: relative;
}

#toptechs_info_content h5 {
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 400;
}

#toptechs_info_content .cpacta {
    padding: 40px 15px;
    text-align: center;
}

#toptechs_info_content .cpacta .btn-default {
    margin-top: 20px;
}

@media (max-width: 767.98px) {
    #toptechs_info_content .container {

        width: 100%;

    }
}
