/* CSS Document */
/*
Theme Name: Brother's In Unity
Description: Brother's In Unity is a clean responsive theme.
Author: Yadav Singh Basnet
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: brothersinunity
*/

@import url("css/menu.css");

body{ font-size:16px; font-family: 'Poppins', sans-serif; color:black;}
a{  -webkit-transition:1s; transition:1s;}

/* Recommanded */
img{ max-width:100%; height:auto;}


.wp-caption { margin-top: 0.4em;}
.wp-caption { background: #eee; margin-bottom: 1.625em; max-width: 96%; padding: 9px;}
.wp-caption img { display: block; margin: 0 auto; max-width: 98%;}
.wp-caption .wp-caption-text,
.gallery-caption { color: #666; font-size: 12px;}
.wp-caption .wp-caption-text { margin-bottom: 0.6em; padding: 10px 0 5px 40px; position: relative;}
.wp-caption .wp-caption-text:before { color: #666; content: '\2014'; font-size: 14px; font-style: normal; font-weight: bold; margin-right: 5px; position: absolute; left: 10px; top: 7px;}
.sticky{ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); position: absolute !important;}
.alignleft{ float:left; margin:10px 10px 10px 0;}
.align-left{ text-align:left;}
.aligncenter{ text-align:center;}
.align-right{ text-align:right;}
.alignright{ float:right; margin:10px 0 10px 10px;}

.logobar{ padding:20px 0;}
h1.logo{ margin:0; font-size: 16px; letter-spacing: 0.5px; line-height: 30px; font-weight: 200; text-align: left;}
header { position: relative; width: 100%; z-index: 9999;}

.titlebar{ background:#4594d1; padding:30px 0; position: relative;}
.titlebar h2{ font-weight: 900; font-size:48px; text-align: center; color:white;}

h1{ font-size:45px;}
h2{ font-size:35px;}
h3{ font-size:28px;}
h4{ font-size:22px;}
h5{ font-size:18px;}
h6{ font-size:16px;}

.topbar{ background:#eee; padding:10px 0;}
.topbar a{ margin:0 5px;}

/* Main Menu */
.menu-left, .menu-right{ margin:0; padding:0;}
.primary-menu > ul{ margin: 0; padding:0; text-align: right;}
.primary-menu > ul > li, .primary-menu > ul > li > ul > li, .primary-menu > ul > li > ul > li > ul > li { display: inline-block; vertical-align: middle; list-style: none; position: relative; margin-right:20px;}
.primary-menu > ul > li.menu-item-has-children{ padding-right:20px; margin-right:0px !important;}
.primary-menu > ul > li:last-child{ margin-right:0;}
.primary-menu > ul > li a { color: #3d3d3d; font-weight: 700; font-size: 16px; line-height:80px; display: block; text-transform: uppercase;}
.primary-menu > ul > li a:hover{ text-decoration: none; color:black;}
.primary-menu > ul > li > ul, .primary-menu > ul > li > ul > li > ul{ display: none; visibility: hidden; margin:0; padding:0;}
.primary-menu > ul > li:hover > ul{ display:block; visibility: visible; position: absolute; top: 60px; left:0; z-index: 9999; margin:0; padding:0;}
.primary-menu > ul > li:hover > ul > li:hover > ul { display:block; visibility: visible; position: absolute; top: 0; left:200px; z-index: 9999; margin:0; padding:0;}
.primary-menu > ul > li > ul > li > a, .primary-menu > ul > li > ul > li > ul > li a{  text-align:left; background:#8cbf41; color:white; border-bottom: 1px solid #78a033; color:#fff; line-height:20px !important; display: block; padding:10px; width:200px;}

.slider { background: url(images/banner.jpg) no-repeat center center; padding:120px 0; position: relative; text-align: center; color:#000; height:100vh;}
.slider::before { background:url(images/cloud.png) no-repeat center center; content: "" !important; display: block !important; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
/* .slider::before { background-image: radial-gradient(rgba(255,255,255,0.1) 20%, rgba(3,78,162,0.7) 80%); content: "" !important; display: block !important; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } */
.slider h2 { font-weight: 300; font-size: 60px; color: #fff;}
.slider h2 span{ font-weight: 700;}
.slider p{ font-weight: 500; font-size:20px; padding:30px; color:#fff; text-shadow: 1px 0px 2px #000;}
.slider ul{ margin:0; padding:0;}
.slider ul li{ display:inline-block; vertical-align: middle; line-height: 40px;}
.slider ul li a{ border:1px solid #fff; color:#fff; font-weight:500; padding:8px 20px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer;}
.slider ul li a:hover, .slider ul li a:active{ background:black; border:1px solid black; color:#fff;}
.slider .slider-content{ margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); width:100%;}

.welcome{ background:#eee; padding:60px 0; color:#333; text-align: center;}
.welcome h5{ line-height:26px;}

.webdesignwrapper{ padding:120px 0;}
.webdesignfeatures{ background:white; padding:20px; border: 5px solid #ccc;}
.webdesignfeatures ul{ margin:0; padding:0;}
.webdesignfeatures ul li{ display: block; border-bottom:1px dashed #333; padding:15px 0;}
.webdesigntitle{ font-weight: 700; font-size:65px; position: relative; z-index:9999; padding-left:40px;}
.webdesignthumb{ position: relative;}
.webdesignthumb::before { background-image: radial-gradient(rgba(255,255,255,0.1) 10%, rgba(3,78,162,0.7) 90%);  content: "" !important; display: block !important; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.webdesigncontent{ padding-top:30px;}


.newsletterstyle label{ width:100%; color:black; text-transform: uppercase; margin:0;}
.newsletterstyle input[type=email], .newsletterstyle input[type=tel], .newsletterstyle input[type=text], .newsletterstyle textarea { background:none; padding: 8px 15px; width:100%; margin-top:5px; color:black; border:1px solid black; font-weight: 500;}
.newsletterstyle input[type=email]::placeholder, .newsletterstyle input[type=tel]::placeholder, .newsletterstyle input[type=text]::placeholder, .newsletterstyle textarea::placeholder { color:#ccc; font-weight: 500;}
.newsletterstyle input[type=submit]{ background:none; text-transform: uppercase; color:#000; padding:9px 40px; border: 1px solid #000; font-size:20px;}
.newsletterstyle input[type=submit]:hover{ background:black; color:#fff;}
.newsletterstyle div.wpcf7-validation-errors, .newsletterstyle div.wpcf7-acceptance-missing { border: 2px solid red; color:red;}
.newsletterstyle div.wpcf7-mail-sent-ok { border: 2px solid #398f14; color:#398f14;}

.home h3{ font-size: 50px;}

.contactushome{ background:#ac2524; color:white; padding:30px; text-align: center;}
.contactushome h3{ font-size:28px;}
.contactushome a{ border-bottom: 1px dashed white;}

.readmore{ display: inline-block; margin-top:30px;}
.readmore a { background: none; border: 1px solid #034EA2; padding: 10px 50px; text-transform: uppercase; font-size: 14px; border-radius: 20px;}
.footerwidget{ background:#2d2d2d; padding:60px 0; color:#fff;}
.footerwidget ul{ margin:0; padding:0;}
.footerwidget ul li { list-style: none; }
.footerwidget ul li a{ display: block; padding:5px 0; border-bottom: 1px dashed #767676; color:white;}
.footerwidget ul li:last-child a{ border-bottom:none;}
.footerwidget p{ opacity: 0.7;}
footer{ background:#2d2d2d; color:#fff; padding:15px 0; }
footer a{ color:#fff; }
footer span{ margin:0 10px;}
footer h4{ color:white;}
footer .footerwidget{ padding:60px 0;}
footer ul li a{ color:rgba(255,255,255,0.6);}
footer ul{ margin:0; padding:0;}
footer ul li { list-style:none;}
.mobile-header{ display: none; visibility: hidden;}
.grecaptcha-badge{ visibility: collapse !important; }

.companyhousetitle h2{ font-size: 56px; text-align: center; font-weight: 700; color: #fff;}
.companyhousetitle h4{ text-decoration: underline;}

.morebutton a{ border:1px solid #034EA2; color:#034EA2; padding:10px 50px; text-transform: uppercase; font-weight: 500;}
.morebutton a:hover{ background:#034EA2; color:#fff;}

.morebuttonservices{ text-align: center;}
.morebuttonservices a{ border:1px solid #034EA2; color:#034EA2; padding:10px 50px; text-transform: uppercase; font-weight: 500;}
.morebuttonservices a:hover{ background:#034EA2; color:#fff;}

.contactushome .wpb_button, .wpb_content_element, ul.wpb_thumbnails-fluid>li{ margin-bottom:0 !important;}
.singleprojects{padding:60px 0;}
.pagetitle{ padding:60px 0; background:#034DA2;}
.pagetitle h2{ color:white; font-size:40px; font-weight: 300; text-align: center;}

.visit{ text-align: center; margin:20px 0 60px 0;}
.visit a{ background:#034DA2; color:white; text-transform: uppercase; padding:10px 20px; border: 1px solid #034DA2; font-weight: 500;}
.visit a:hover{ background:transparent; color:#034DA2;}

.headericon{ text-align: right; margin:25px 0;}
.headericon .headericondetails, .headericon i{ display:inline-block; vertical-align: top;}
.headericon .headericondetails { text-align: left; letter-spacing: 1px; display: inline-block; width: 70%; color: white;}
.headericon .headericondetails strong{ display: block;}
.headericon i { color: #ffef23; margin-right: 10px; display: inline-block; width: 42px;}

.whatwedo{ background:url(images/whatwedo.jpg) no-repeat center left; background-size: cover; background-attachment: fixed; padding:200px 0;}
.services{ padding:60px 0; background: #eee;}
.services h3{ font-size:50px; font-weight: 300; margin-bottom:60px;}
.services h4{margin:20px 0; padding:0;}
.contentpanel{ padding:60px 0;}
.servicesitem{ margin-bottom:30px;}
.sidebar{ margin-bottom:30px;}
.sidebar h4{ }
.sidebar ul{ margin:0 0 0 20px; padding: 0;}
.sidebar ul li { list-style: circle; padding: 10px 0; border-bottom: 1px solid #ccc;}
.tags a, .readmoreblog{ background:#c3282e; border:1px solid #c3282e; color:white !important; margin:5px; padding:5px 10px; border-radius: 10px; display: inline-block;}
.tags a:hover, .readmoreblog:hover{ background:white; color:#c3282e !important;}

/*Pagination*/
.pagination { clear:both; padding:20px 0; position:relative; font-size:11px; line-height:13px; float:right;}
.pagination span, .pagination a { display:block; float:left; margin: 2px 2px 2px 0; padding:6px 9px 5px 9px; text-decoration:none; width:auto; color:#fff; background: #555;}
.pagination a:hover{ color:#fff; background: #0000CD;}
.pagination .current{ padding:6px 9px 5px 9px; background: #0000CD; color:#fff;}
.pagination ul { margin:0; padding:0;}
.pagination ul li{ list-style:none; display: inline-block; vertical-align: middle;}
.pagespace{ padding-bottom:40px;}

.donation_menu a{ background: #4594d1; border:2px solid #4594d1; padding: 0 20px; color: white !important; letter-spacing: 1px;}
.donation_menu a:hover{ background:white; color:#4594d1 !important;}

.testimonials{ background:#eee; padding:60px 0; text-align: center;}
.hometestimonials{ padding:20px; background: white;}
.hometestimonials .testimonialuser {
    display: inline-block;
    vertical-align: middle;
}
.testimonialusericon {
    border-radius: 50%;
    width: 50px;
    border: 5px solid #ccc;
    background: #eee;
    color: #444;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding: 7px;
}
.hometestimonials .testimonialuser img{ border-radius: 50%; width: 50px; border: 5px solid #ccc;}
.hometestimonials_details{ display: inline-block; vertical-align: middle; margin-left:10px;}
.hometestimonials_details .ratings ul{ margin:0; padding: 0;}
.hometestimonials_details .ratings ul li{ list-style: none; display: inline-block; vertical-align: middle; color:orange;}

/* IPAD */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .headericon i { width: 20px; font-size: 20px;}
  .headericon .headericondetails { font-size: 10px;}
}
/* IPAD LANDSCAPE */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}

/* Cell Phones */
@media only screen and (max-width: 767px) {
    .mobile-header{ display: block; visibility: visible; padding:10px 0; position:relative; top:0; left:0; width:100%; background:white;}
    .mobile-header .logo img{ width:220px;}
    .logobar, .nomobile{ display: none; visibility: hidden;}
    .outer-menu { position: absolute; top: 10px; right: 10px; z-index: 9999;}
    h1.logo { text-align: left; padding-left: 20px;}
    .slider { padding: 120px 0;}
    .slider p { font-size: 16px; }
    .slider h2 { font-size: 40px; }
    .slider ul li a { font-size: 12px; }
    .mobileblock a{ display: block;}
}

@media print {}