/*******************
Preloader
********************/
.preloader {
    width: 100%;
    height: 100%;
    top: 0px;
    position: fixed;
    z-index: 99999;
    background: #fff; }
.preloader .cssload-speeding-wheel {
    position: absolute;
    top: calc(50% - 3.5px);
    left: calc(50% - 3.5px); }

.loader,
.loader__figure {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }

.loader {
    overflow: visible;
    padding-top: 2em;
    height: 0;
    width: 2em; }

.loader__figure {
    height: 0;
    width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 0 solid #1976d2;
    border-radius: 50%;
    -webkit-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); }

.loader__label {
    float: left;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    margin: 0.5em 0 0 50%;
    font-size: 0.875em;
    letter-spacing: 0.1em;
    line-height: 1.5em;
    color: #1976d2;
    white-space: nowrap;
    -webkit-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    -moz-animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1); }

@-webkit-keyframes loader-figure {
    0% {
        height: 0;
        width: 0;
        background-color: #1976d2; }
    29% {
        background-color: #1976d2; }
    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1; }
    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent; } }

@-moz-keyframes loader-figure {
    0% {
        height: 0;
        width: 0;
        background-color: #1976d2; }
    29% {
        background-color: #1976d2; }
    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1; }
    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent; } }

@keyframes loader-figure {
    0% {
        height: 0;
        width: 0;
        background-color: #1976d2; }
    29% {
        background-color: #1976d2; }
    30% {
        height: 2em;
        width: 2em;
        background-color: transparent;
        border-width: 1em;
        opacity: 1; }
    100% {
        height: 2em;
        width: 2em;
        border-width: 0;
        opacity: 0;
        background-color: transparent; } }

@-webkit-keyframes loader-label {
    0% {
        opacity: 0.25; }
    30% {
        opacity: 1; }
    100% {
        opacity: 0.25; } }

@-moz-keyframes loader-label {
    0% {
        opacity: 0.25; }
    30% {
        opacity: 1; }
    100% {
        opacity: 0.25; } }

@keyframes loader-label {
    0% {
        opacity: 0.25; }
    30% {
        opacity: 1; }
    100% {
        opacity: 0.25; } }


@font-face {
    font-family: 'Calibri';
    src: url(http://breworksstaging.com/wonder/wp-content/uploads/2019/04/Calibri.woff2) format('woff2'), url(http://breworksstaging.com/wonder/wp-content/uploads/2019/04/Calibri.woff) format('woff'), url(http://breworksstaging.com/wonder/wp-content/uploads/2019/04/Calibri.ttf) format('truetype');
}

@font-face {
    font-family: 'Calibri bold';
    src: url(http://breworksstaging.com/wonder/wp-content/uploads/2019/04/Calibri-Bold.woff2) format('woff2'), url(http://breworksstaging.com/wonder/wp-content/uploads/2019/04/Calibri-Bold.woff) format('woff'), url(http://breworksstaging.com/wonder/wp-content/uploads/2019/04/Calibri-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Calibri italic';
    src: url(http://breworksstaging.com/wonder/wp-content/uploads/2019/04/Calibri-Italic.woff2) format('woff2'), url(http://breworksstaging.com/wonder/wp-content/uploads/2019/04/Calibri-Italic.woff) format('woff'), url(http://breworksstaging.com/wonder/wp-content/uploads/2019/04/Calibri-Italic.ttf) format('truetype');
}

@font-face {
    font-family: 'Calibri bold italic';
    src: url(http://breworksstaging.com/wonder/wp-content/uploads/2019/04/Calibri-BoldItalic.woff2) format('woff2'), url(http://breworksstaging.com/wonder/wp-content/uploads/2019/04/Calibri-BoldItalic.woff) format('woff'), url(http://breworksstaging.com/wonder/wp-content/uploads/2019/04/Calibri-BoldItalic.ttf) format('truetype');
}

@font-face {
    font-family: 'Archive';
    src: url(http://breworksstaging.com/wonder/wp-content/uploads/2019/06/Archive.woff2) format('woff2'), url(http://breworksstaging.com/wonder/wp-content/uploads/2019/06/Archive.woff) format('woff'), url(http://breworksstaging.com/wonder/wp-content/uploads/2019/06/Archive.ttf) format('truetype');
}

/******************* 
Global Styles 
*******************/
* {
    outline: none; }

body {
    background: #ffffff;
    font-family: "Calibri", sans-serif;
    margin: 0;
    overflow-x: hidden;
    color: #404040;
    font-weight: 300;
    line-height: 27px; 
    font-size: 14px;
}

html {
    position: relative;
    min-height: 100%;
    background: #ffffff; }

a:hover,
a:focus {
    text-decoration: none; }

a.link {
    color: #3e4555; }
a.link:hover, a.link:focus {
    color: #1dc8cd; }

a.white-link {
    color: #ffffff; }
a.white-link:hover, a.white-link:focus {
    color: #263238; }

.img-responsive {
    width: 100%;
    height: auto;
    display: inline-block; }

.img-rounded {
    border-radius: 4px; }

html body .mdi:before,
html body .mdi-set {
    line-height: initial; }

/*******************
Headings
*******************/
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #3e4555;
    font-family: "Calibri", sans-serif; 
}

h1 {
    line-height: 40px;
    font-size: 36px; }

h2 {
    line-height: 36px;
    font-size: 30px; }

h3 {
    line-height: 30px;
    font-size: 24px; }

h4 {
    line-height: 26px;
    font-size: 21px; }

h5 {
    line-height: 22px;
    font-size: 18px;
    font-weight: 400; }

h6 {
    line-height: 20px;
    font-size: 16px;
    font-weight: 400; }

.display-5 {
    font-size: 3rem; }

.display-6 {
    font-size: 36px; }

.display-7 {
    font-size: 26px; }

.box {
    border-radius: 4px;
    padding: 10px; }

html body .dl {
    display: inline-block; }

html body .db {
    display: block; }

.no-wrap td,
.no-wrap th {
    white-space: nowrap; }

.circle {
    border-radius: 100%; }

/*******************
Blockquote
*******************/
html body blockquote {
    border-left: 5px solid #1dc8cd;
    border: 1px solid rgba(120, 130, 140, 0.13);
    padding: 15px; }

.clear {
    clear: both; }

ol li {
    margin: 5px 0; }

/*******************
Paddings
*******************/
html body .p-0 {
    padding: 0px; }

html body .p-10 {
    padding: 10px; }

html body .p-15 {
    padding: 15px; }

html body .p-20 {
    padding: 20px; }

html body .p-30 {
    padding: 30px; }

html body .p-40 {
    padding: 40px; }

html body .p-l-0 {
    padding-left: 0px; }

html body .p-l-10 {
    padding-left: 10px; }

html body .p-l-20 {
    padding-left: 20px; }

html body .p-r-0 {
    padding-right: 0px; }

html body .p-r-10 {
    padding-right: 10px; }

html body .p-r-20 {
    padding-right: 20px; }

html body .p-r-30 {
    padding-right: 30px; }

html body .p-r-40 {
    padding-right: 40px; }

html body .p-t-0 {
    padding-top: 0px; }

html body .p-t-10 {
    padding-top: 10px; }

html body .p-t-20 {
    padding-top: 20px; }

html body .p-t-30 {
    padding-top: 30px; }

html body .p-b-0 {
    padding-bottom: 0px; }

html body .p-b-5 {
    padding-bottom: 5px; }

html body .p-b-10 {
    padding-bottom: 10px; }

html body .p-b-20 {
    padding-bottom: 20px; }

html body .p-b-30 {
    padding-bottom: 30px; }

html body .p-b-40 {
    padding-bottom: 40px; }

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

/*******************
Margin
*******************/
html body .m-0 {
    margin: 0px; }

html body .m-l-5 {
    margin-left: 5px; }

html body .m-l-10 {
    margin-left: 10px; }

html body .m-l-15 {
    margin-left: 15px; }

html body .m-l-20 {
    margin-left: 20px; }

html body .m-l-30 {
    margin-left: 30px; }

html body .m-l-40 {
    margin-left: 40px; }

html body .m-r-5 {
    margin-right: 5px; }

html body .m-r-10 {
    margin-right: 10px; }

html body .m-r-15 {
    margin-right: 15px; }

html body .m-r-20 {
    margin-right: 20px; }

html body .m-r-30 {
    margin-right: 30px; }

html body .m-r-40 {
    margin-right: 40px; }

html body .m-t-0 {
    margin-top: 0px; }

html body .m-t-5 {
    margin-top: 5px; }

html body .m-t-10 {
    margin-top: 10px; }

html body .m-t-15 {
    margin-top: 15px; }

html body .m-t-20 {
    margin-top: 20px; }

html body .m-t-30 {
    margin-top: 30px; }

html body .m-t-40 {
    margin-top: 40px; }

html body .m-b-0 {
    margin-bottom: 0px; }

html body .m-b-5 {
    margin-bottom: 5px; }

html body .m-b-10 {
    margin-bottom: 10px; }

html body .m-b-15 {
    margin-bottom: 15px; }

html body .m-b-20 {
    margin-bottom: 20px; }

html body .m-b-30 {
    margin-bottom: 30px; }

html body .m-b-40 {
    margin-bottom: 40px; }

/******************* 
Owl carousel
*******************/
.owl-carousel {
    display: block;
    width: 100%; }
.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden; }
.owl-carousel .owl-stage {
    position: relative; }
.owl-carousel .owl-item {
    float: left; }
.owl-carousel .owl-nav.disabled {
    display: none; }



#main-wrapper{background-image:url(../images/bg-t.jpg); background-color: rgba(40, 40, 40, 0.5); background-size: 100% 100%;}

.technology-list { overflow: hidden; overflow-y: auto; padding-right: 15px; }
.technology-list .card{background-color: transparent; border: 0; color: #fff;}
.technology-list .card .card-header{background-color: transparent; border-radius: 0; border-bottom: 0; border-top: 1px solid #4a4b83; padding: 0;}
.technology-list .card:first-child .card-header{border-top: 0;}
.technology-list .card .card-header button:after{font-family: FontAwesome; content: '\f107'; position: absolute; top: 12px; right: 5px;}
.technology-list .card .card-header button.collapsed:after{content: '\f105'; }
.technology-list .card .card-header button{background-color: rgba(74, 75, 131, 0.8)}
.technology-list .card .card-header button.collapsed{background-color: transparent;}
.technology-list .card-header .btn-link{color: #ffffff; text-decoration: none; cursor: pointer; text-transform: uppercase; font-size: 0.8rem; width: 100%; text-align: left; padding: 12px 30px 12px 18px;}
.technology-list .card-body h4.term-title{color: #ffffff; font-weight: 700; text-transform: uppercase; font-size: 1.2rem;}

.company-info{
    width: 100%; height: 180px; position: absolute; bottom: 0; border-top: 1px solid #656596; 
    padding-top: 20px; padding-left: 20px; color: #fff;line-height: 14px; font-size: 13px;
}
.company-info a{color: #ffffff;}
.company-info p.comp-name{font-size: 14px;}

ul.menu-item-list{position: absolute; bottom: 190px; margin: 0; padding: 0;}
ul.menu-item-list li{padding: 0 20px;}
ul.menu-item-list li a{color: #ffffff;}

.left-content{ position: relative;width: 30%;float: left; background-color: rgba(29, 30, 100, 0.6); padding-right: 15px;}
.left-content .link-hide-left-content{color: #ffffff; font-size: 20px; position: absolute; top: 45%; right: 15px;}
.left-content.expanded{position: relative;width: 30%;}
.left-content.collapsed{position: absolute; left: -28%;}
.right-content{position: relative; width: 100%; float: right;}
.right-content.expanded{position: relative;width: 100%;}
.right-content.full{position: relative; width: 98%;}

.banner-bottom{position: absolute; bottom: 60px; right: 0;}
#footer{position: absolute; bottom: 0; left: 0; height: 60px; width: 100%;}

.banner-bottom .item{background-color: #f4f3f4; }
.banner-bottom .item .news-thumb img{width: 100%; max-width: 100%;}
.banner-bottom .item .news-body{padding: 15px 60px 0 0;}
.news-body a.read-more{color: #292b8f;}
.news-body h4.news-title{color: #535353; font-weight: 500; text-transform: uppercase; font-size: 16px;}

.owl-theme.banner-bottom .owl-dots{position: absolute; top: 25%; right: 30px; }
.owl-theme.banner-bottom .owl-dots .owl-dot{display: block; margin-bottom: 10px; cursor: pointer; background: #b4b4b4; width: 12px; height: 12px; border-radius: 50%;} 
.owl-theme.banner-bottom .owl-dots .owl-dot:hover,
.owl-theme.banner-bottom .owl-dots .owl-dot.active{background: #292b8f;}

ul.footer-item-list, 
ul.footer-item-list ul {list-style-type: none; margin: 0; padding: 0;}
ul.footer-item-list > li{display: inline; width: 25%; float: left; font-size: 12px; padding: 15px 10px;}
ul.footer-item-list > li:last-child{width: 50%; text-align: right;}
ul.footer-item-list > li, ul.footer-item-list > li a{color: #ffffff; }
.home-footer.footer-item-list > li:first-child{width: 50%;}
ul.footer-item-list ul li{float: left; margin-right: 20px;}
ul.footer-item-list ul li:last-child{margin-right: 0;}

.main-section{width: 25%; min-width: 320px; margin: 10% auto;}
.logo-section .logo-img {width: 100%;}
.logo-section .logo-img,
/* .logo-section .slogan-img{max-width: 90%;}
.logo-section .logo-img{margin-left: 14%;} */

form.login-form .field.input-checkbox label,
form.login-form .field label[for]:before{color: #ffffff;}
form.login-form .btn,
form.register-form .btn{width: 100%; float: left; }
form.login-form .btn.btn-login{margin-right: 3%; width: 100%;}
form.login-form .btn.btn-register{margin-left: 3%;}
form.login-form a.forgot-password{color: #ffffff;}
form.register-form .btn.btn-register{float: right;}
form.login-form .field.input-checkbox label,
form.login-form .field.input-checkbox label a,
form.login-form .field label[for]:before,
form.register-form .field.input-checkbox label,
form.register-form .field.input-checkbox label a,
form.register-form .field label[for]:before{color: #ffffff;}
form.login-form .field.input-checkbox label a,
form.register-form .field.input-checkbox label a{font-weight: 700;}

.cms-page h1,.cms-page h2,.cms-page h3,.cms-page h4, .cms-page h5,.cms-page h6,
.cms-page p,.cms-page span,.cms-page ul,.cms-page li,.cms-page a{color: #ffffff;}
.cms-page {padding: 20px; overflow: hidden; overflow-y: auto;}
span.error-message{color: #fff;font-size: 13px;font-style: italic;}
#register-success-modal .modal-dialog{max-width: 600px; width: 90%;}
#register-success-modal .message p{color: #292b8f; font-weight: 400;}
#register-success-modal .close{cursor: pointer;}
#register-success-modal .btn-blue{border-radius: 5px;}


@media (max-width: 767px) {
    /*This is for the slider*/
    .slider1 h2 {font-size: 30px; }
    
    #main-wrapper{background-size: cover;}
    .left-content, .right-content{float: none;}
    .left-content.expanded,
    .right-content.expanded{width: 100%; height: auto;}
    .left-content .link-hide-left-content{display: none;}
    .company-info,
    .banner-bottom,
    #footer{position: relative; height: auto;}
    .banner-bottom .item .news-body{padding: 15px 20px;}
    .company-info{padding-bottom: 5px;}
    
}

@media (max-width: 428px) {
    .slider1 h2 {
        font-size: 18px;
        padding: 15px 15px; }
    .slider1 a {
        font-size: 14px; } 
}