/*========================================================================*/ /* ///////////////////////////////////////////////////////////////////// // 03 - Preloader /////////////////////////////////////////////////////////////////////*/ #preloader { position:fixed; left:0; top:0; z-index:99999999999; width:100%; height:100%; overflow:visible; background: #FFF8E3 url('../img/preloader.gif') no-repeat center center; } /* ========================================================================== Global Styles ========================================================================== */ a, .aboxlink{ color: #E04343; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; transition:all 0.5s; border-bottom: 1px dashed; outline:none!important; } .dark-box p { border-bottom: none; } a:hover,a:focus,a:active { color:#0D0D0D; text-decoration:none; outline:none!important; } p { color:#8c9398; word-spacing:1px; line-height:25px; font-size:14px; } h2 { font-size:15px; color:#353535!important; text-transform:uppercase; font-weight:bold; } h2::after { content:" "; border:solid 1px #CCCCCC; display:block; width:65px; margin:20px auto; } h6 { font-size:15px; color:#8c8c8c; text-transform:uppercase; font-weight:bold; } h6::after { content:" "; border:solid 1px #CCCCCC; display:block; width:65px; margin-top: 20px; } /* ==========================================================================HTML5 display definitions========================================================================== */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { display:block; } audio,canvas,video { display:inline-block; *display:inline; *zoom: 1; } * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display:none; height:0; } [hidden] { display: none; } /* ==========================================================================Base========================================================================== */ html { font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } html,html a { -webkit-font-smoothing:antialiased; text-shadow:1px 1px 1px rgba(0,0,0,0.004); } html,button,input,select,textarea { font-family:'Varela Round',sans-serif; } body { margin:0; font-family: 'Open Sans',sans-serif; } /* ==========================================================================Links========================================================================== */ a:focus { outline:thin dotted; } a:active,a:hover { outline: 0; } /* ==========================================================================Typography========================================================================== */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400); h1 { font-size:2em; margin:0.67em 0; # color:#353535; color:#E04343; } h2 { font-size:1.5em; margin:0.83em 0; } h3 { font-size:1.17em; margin:1em 0; } h4 { font-size:1em; margin:1.33em 0; } h5 { font-size:0.83em; margin:1.67em 0; } h6 { font-size: 12px; margin:2.33em 0; } abbr[title] { border-bottom:1px dotted; } b,strong { font-weight:bold; } blockquote { margin:0em 55px; border-left:4px solid #CCCCCC; } dfn { font-style:italic; } mark { background:#ff0; color:#000; } p,pre { margin:1em 0; } code,kbd,pre,samp { font-family:monospace,serif; _font-family:'courier new',monospace; font-size:1em; } pre { white-space:pre; white-space:pre-wrap; word-wrap:break-word; } q { quotes:none; } q:before,q:after { content:''; content:none; } small { font-size:75%; } sub,sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; } sup { top:-0.5em; } sub { bottom:-0.25em; } p { font-size: 14px; font-weight:100; line-height: 28px!important; } /* ==========================================================================Lists========================================================================== */ dl,menu,ol,ul { margin:1em 0; } dd { margin:0 0 0 40px; } menu,ol,ul { padding:0 0 0 40px; } nav ul,nav ol { list-style:none; list-style-image: none; } /* ==========================================================================Embedded content========================================================================== */ img { border:0; -ms-interpolation-mode:bicubic; } svg:not(:root) { overflow: hidden; } /* ==========================================================================Figures========================================================================== */ figure { margin: 0; } /* ==========================================================================Forms========================================================================== */ form { margin:0; } fieldset { border:1px solid #c0c0c0; margin:0 2px; padding:0.35em 0.625em 0.75em; } legend { border:0; padding:0; white-space:normal; *margin-left:-7px; } button,input,select,textarea { font-size:100%; /margin:0; vertical-align:baseline; *vertical-align:middle; } button,input { line-height:normal; } button,html input[type="button"],input[type="reset"],input[type="submit"] { -webkit-appearance:button; cursor:pointer; *overflow:visible; } button[disabled],input[disabled] { cursor:default; } input[type="checkbox"],input[type="radio"] { box-sizing:border-box; padding:0; *height:13px; *width:13px; } input[type="search"] { -webkit-appearance:textfield; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; } input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance:none; } button::-moz-focus-inner,input::-moz-focus-inner { border:0; padding:0; } textarea { overflow:auto; vertical-align: top; } /* ==========================================================================Tables========================================================================== */ table { border-collapse:collapse; border-spacing: 0; } /* ==========================================================================Section Styles========================================================================== */ .section-padding { padding:90px 0 100px } .dark-bg { background:#f3f5f8; } .light-bg { background-color:#fff; } .dark-box { background: #F3F5F8; -webkit-box-shadow: 0px 3px 0px 0px #E04343; -moz-box-shadow: 0px 3px 0px 0px #E04343; box-shadow: 0px 3px 0px 0px #E04343; padding:20px 0; } .dark-box:hover,.dark-box:focus { -webkit-box-shadow: 0px 3px 0px 0px #FFE801; -moz-box-shadow: 0px 3px 0px 0px #FFE801; box-shadow: 0px 3px 0px 0px #FFE801; } .box-hover { transition:all 500ms ease-in-out; -webkit-transition:all 500ms ease-in-out; -moz-transition:all 500ms ease-in-out; -o-transition:all 500ms ease-in-out; } .box-hover:hover,.box-hover:focus { transform:translate(0,-15px); -webkit-transform:translate(0,-15px); -ms-transform:translate(0,-15px); } .wrapper { height:650px; } .nopadding { padding:0; } .inner { padding-top: 138px; } /* ==========================================================================Navigation========================================================================== */ .menu-wrap a { color:#555d7c; outline:none!important; } .menu-wrap a:hover,.menu-wrap a:focus { color: #E04343; } .content-wrap { overflow-y:scroll; -webkit-overflow-scrolling:touch; -webkit-transition:-webkit-transform 0.4s; transition:transform 0.4s; -webkit-transition-timing-function:cubic-bezier(0.7,0,0.3,1); transition-timing-function:cubic-bezier(0.7,0,0.3,1); } .content { position:relative; background:#b4bad2; padding-bottom: 12em; } /* Common styles for menu button and menu-wrap */ .menu-button,.menu-wrap { position:fixed; width:2.5em; height:2.25em; font-size:1.5em; -webkit-transform:translate3d(1.5em,1.5em,0); transform: translate3d(1.5em,1.5em,0); } /* Menu Button */ .menu-button { z-index:1000; margin:0; padding:0; border:none; text-indent:2.5em; color:transparent; background:transparent; } .menu-button::before { position:absolute; top:0.5em; right:0.5em; bottom:0.5em; left:0.5em; background: linear-gradient(#E04343 20%,rgba(0, 0, 0, 0) 20%,rgba(0, 0, 0, 0) 40%,#E04343 40%,#E04343 60%,rgba(0, 0, 0, 0) 60%,rgba(0, 0, 0, 0) 80%,#E04343 80%); content:''; } .menu-button:hover { opacity: 0.6; } /* Menu */ .menu-wrap { z-index:999; background: rgba(255, 248, 227, .8); -webkit-transition:width 0.4s,height 0.4s,-webkit-transform 0.4s; transition:width 0.4s,height 0.4s,transform 0.4s; -webkit-transition-timing-function:cubic-bezier(0.7,0,0.3,1); transition-timing-function:cubic-bezier(0.7,0,0.3,1); } .menu { height:100%; overflow:hidden; font-size:0.75em; } .icon-list { float:right; padding:2.5em 2em 0 6em; } .icon-list a { opacity:0; display:inline-block; padding:0 0.2em; margin:0 15px; text-align:center; font-size:1.2em; color: #353535; } .icon-list a span { display:block; text-transform:uppercase; letter-spacing:1px; font-size:0.5em; font-weight:700; padding-top: 0.5em; } /* Shown menu */ .show-menu .content-wrap { -webkit-transition-delay:0s; transition-delay:0s; -webkit-transform:translate3d(0,125px,0); transform:translate3d(0,125px,0); } .show-menu .menu-wrap { width:100%; height:125px; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-transition-delay:0s; transition-delay:0s; border-bottom: 1px solid #E04343; } .show-menu .icon-list a { opacity:1; -webkit-transition:opacity 0.4s 0.4s; transition:opacity 0.4s 0.4s; } .show-menu .icon-list a:nth-child(2) { -webkit-transition-delay:0.42s; transition-delay:0.42s; } .show-menu .icon-list a:nth-child(3) { -webkit-transition-delay:0.44s; transition-delay:0.44s; } .show-menu .icon-list a:nth-child(4) { -webkit-transition-delay:0.46s; transition-delay:0.46s; } .show-menu .icon-list a:nth-child(5) { -webkit-transition-delay:0.48s; transition-delay:0.48s; } .show-menu .icon-list a:nth-child(6) { -webkit-transition-delay:0.5s; transition-delay: 0.5s; } /* ==========================================================================Hero========================================================================== */ .hero { background: url('../img/header-bg.jpg') bottom no-repeat; background-size: cover; padding:110px 0 100px 0; height:auto; background-color: #FBFBFB; } .hero h1 { font-size: 120px; letter-spacing: -3px; margin: 0; font-weight: 600; line-height: 95px; text-transform: uppercase; text-shadow: 0 0 3px #FFF8E3, 0 0 3px #FFF8E3, 0 0 3px #FFF8E3, 0 0 3px #FFF8E3; padding-top: 10px; color: rgba(29, 4, 1); } .hero h1 span { #color:#a1a9b0; #color:#795535; color: #FFF8E3; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 0 0 3px #000; /* display:inline-block; */ } .hero h3 { font-size: 20px; width: 440px; margin:0; padding:0; opacity:0.5; #color: #E04343; color: #FFF8E3; letter-spacing: 8px; line-height: 40px; text-transform: uppercase; } .hero p { letter-spacing:1px; color:#fff; font-size: 15px; } /* Boucing Arrow Animation */ @keyframes arrowbounce { from { -webkit-transform:translateY(0); -moz-transform:translateY(0); transform:translateY(0); } to { -webkit-transform:translateY(-20px); -moz-transform:translateY(-20px); transform:translateY(-20px); } } @-moz-keyframes arrowbounce { /* Firefox */ from { -webkit-transform:translateY(0); -moz-transform:translateY(0); transform:translateY(0); } to { -webkit-transform:translateY(-20px); -moz-transform:translateY(-20px); transform:translateY(-20px); } } @-webkit-keyframes arrowbounce { /* Safari and Chrome */ from { -webkit-transform:translateY(0); -moz-transform:translateY(0); transform:translateY(0); } to { -webkit-transform:translateY(-20px); -moz-transform:translateY(-20px); transform:translateY(-20px); } } @-o-keyframes arrowbounce { /* Opera */ from { -webkit-transform:translateY(0); -moz-transform:translateY(0); transform:translateY(0); } to { -webkit-transform:translateY(-20px); -moz-transform:translateY(-20px); transform:translateY(-20px); } } .scrollto { padding: 150px 0px 0px 0px; display:block; color:#FFF; text-decoration:none; width:200px; margin:0 auto; border-bottom: none; } .scrollto--arrow { padding:10px; } .scrollto--arrow img { animation:arrowbounce 1s alternate infinite; -moz-animation:arrowbounce 1s alternate infinite; /* Firefox */-webkit-animation:arrowbounce 1s alternate infinite; /* Safari and Chrome */-o-animation: arrowbounce 1s alternate infinite; /* Opera */ } /* ==========================================================================Intro========================================================================== */ .intro p { margin:50px 0 0; } h1.arrow { font-size: 16px; text-transform:uppercase; color:#353535; letter-spacing: 4px; background:url('../img/h1-bg.png') no-repeat center bottom; padding-bottom:30px; font-weight: bold; } h1.arrow span { color: #E04343; } /* ==========================================================================About========================================================================== */ .about-image { height:400px; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; } .color-bg { background: #F5BD5C; } .color-bg a { color: #FFE800; } .color-bg h6, .color-bg p { color: #1D2904; font-size: 1.5em; } .color-bg h6::after{ border-color: #fff; } .color-bg .weight-outline-btn { color: white; border-color: white; } .color-bg .weight-outline-btn:hover { background: #FFF; color: #E04343; border-color: rgba(0, 0, 0, 0); } .about-text { padding:20px 50px 25px 50px; } .about-text h1 { text-transform:uppercase; font-size:24px; color: #8C8C8C; } .color-bg h1.arrow span { color: #1D2904; } .color-bg h1.arrow { color: #FFF; } /* ==========================================================================Services========================================================================== */ .services { margin-top:80px; margin-bottom:40px; } .services .icon { position:relative; width:175px; height:175px; margin:0 auto; text-align:center; line-height:180px; font-size:56px; color:#fff; border-radius:50%; box-shadow:0 0 0 0 rgba(0,0,0,0.0); margin-bottom:40px; -webkit-transition:all .3s ease-out; transition:all .3s ease-out; border: 1px solid #E04343; color: #E04343; } .services .item:hover .icon { background: #E04343; border: 1px solid #E04343; } .services .item [class*=fa] { -webkit-transition:all .3s ease-out; transition:all .3s ease-out; } .services .item:hover [class*=fa] { -webkit-transform:scale(1.2); transform:scale(1.2); -webkit-transition:all .3s ease-out; transition:all .3s ease-out; color:#fff; } .features-wrapper { margin:70px 0 0; } i.respons { position:relative; width:35px; height:35px; margin:0 auto; line-height:35px; text-align:center; font-size:15px; color:#fff; border-radius:50%; -webkit-transition:all .3s ease-out; transition:all .3s ease-out; border:1px solid #CCCCCC; color: #CCCCCC; } /* ==========================================================================iPhone Section========================================================================== */ .iphone { width:50%; background:#f3f5f8; float:left; height:100%; box-shadow:inset -15px -11px 40px -6px rgba(0,0,0,0.1); -moz-box-shadow:inset -15px -11px 40px -6px rgba(0,0,0,0.1); -webkit-box-shadow:inset -15px -11px 40px -6px rgba(0,0,0,0.1); z-index:1; } .fluid-white { width:50%; background:#fff; float:right; height:100%; z-index:2; } .responsive-services { position: relative; } /* ==========================================================================Portfolio========================================================================== */ .swag { padding:75px 0; } .swag h1 { text-transform:uppercase; letter-spacing:5px; } .swag h1 span { display:block; font-size:25px; margin-top:20px; } .down-arrow-btn { width:auto; height:40px; background:rgba(0,0,0,0.6); display:inline-block; margin:15px 5px 15px 5px; color:#fff; font-size:16px; line-height:40px; padding:0px 10px; text-align:center; } .down-arrow-btn:hover,.down-arrow-btn:focus { color:#fff; background:rgba(0,0,0,1); } .portfolio img { height:300px; width:100%; } img.grayscale { filter:url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+,IE10 */ filter:gray; /* IE6-9 */ -webkit-filter:grayscale(100%); /* Chrome 19+& Safari 6+*/ -webkit-transition:all .6s ease; /* Fade to color for Chrome and Safari */ -webkit-backface-visibility:hidden; /* Fix for transition flickering */ } img.grayscale:hover { filter:none; -webkit-filter:grayscale(0%); } .row-offset-0 { margin-left:0; margin-right:0; } .row-offset-0>* { padding-left:0; padding-right:0; } .effects { padding-left:15px; } .effects .img { position:relative; position:relative; z-index:1; overflow:hidden; } .effects .img:nth-child(n) { margin-right:5px; } .effects .img:first-child { margin-left:-15px; } .effects .img:last-child { margin-right:0; } .effects .img img { display:block; margin:0; padding:0; height:auto; } .overlay { display:block; position:absolute; z-index:20; filter:none!important; -webkit-filter:grayscale(0%); overflow:hidden; transition:all 0.5s; -webkit-transition:all 0.5s; -moz-transition:all 0.5s; -o-transition:all 0.5s; } .overlay-effect .img i { font-size:30px; } .overlay-effect .overlay { bottom:0; left:0; right:0; width:100%; height:100%; opacity:0; } .overlay-effect .overlay a.expand { left:0; right:0; bottom:47%; margin:0 auto -30px auto; } .overlay-effect .img.hover .overlay { height:100%; opacity:1; } .img img { width:-webkit-calc(100%+40px) !important; width:calc(100%+40px) !important; -webkit-transition:opacity 0.35s,-webkit-transform 0.35s; transition:opacity 0.35s,transform 0.35s; -moz-transition:opacity 0.35s,-moz-transform 0.35s; -o-transition:opacity 0.35s,-o-transform 0.35s; -webkit-transform:translate3d(-40px,0,0); transform:translate3d(-40px,0,0); -ms-transform:translate3d(-40px,0,0); } .img:hover img { -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -ms-transform:translate3d(-40px,0,0); } .hype { position:absolute; left:0; right:0; margin-left:auto; margin-right:auto; top: 50px; } /* ==========================================================================Subscribe========================================================================== */ .subscribe { padding-top:75px; } .subscribe h1 { color: #FFFFFF; margin-bottom:40px; } .subscribe h1 span { display:block; font-size:15px; text-transform:uppercase; font-weight:bold; margin-top:20px; letter-spacing:1px; } .subscribe input[type=text] { background-color:rgba(255,255,255,0.1); border: solid 1px #FFE800; padding:20px; width:30%; color:#808080; } .subscribe input[type=text]:focus { outline: none; } .subscribe input[type=submit] { background: #FFE800; border: solid 1px #FFE800; padding:20px; color: #E04343; text-transform:uppercase; letter-spacing:1px; transition:all 0.5s ease; -moz-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -o-transition:all 0.5s ease; } .subscribe input[type=submit]:hover { background: rgba(255, 232, 0, 0.9); border: solid 1px #FFE800; color: #E04343; } /* ==========================================================================CTA========================================================================== */ .spacer-cta { background-color: #E04343; padding:70px 0; } .outline-btn { display:inline-block; padding:25px 40px; color: #FFE801; border: solid 1px #FFE801; text-transform:uppercase; font-weight:bold; letter-spacing:1px; } .outline-btn:hover,.outline-btn:focus { color: #E04343; border: solid 1px #E04343; background: #FFE801; } .weight-outline-btn { display:inline-block; padding:20px 30px; color:#8C8C8C; border:solid 1px #8C8C8C; text-transform:uppercase; font-weight:bold; letter-spacing:1px; } .weight-outline-btn:hover,.outline-btn:focus { color:#424242; border: solid 1px #424242; } /* ==========================================================================Team========================================================================== */ .team img { margin-bottom:20px; } ul.social-buttons { list-style:none; margin:0; padding:0; } ul.social-buttons li { display:inline-block; margin-right:10px; } ul.social-buttons li:last-child { margin-right:0; } .social-btn { width:40px; height:40px; background: #E04343; display:inline-block; color:#fff; font-size:17px; line-height:40px; text-align:center; } .social-btn:hover,.social-btn:focus { background: rgba(255, 232, 0, 1); color: #E04343; } .social { margin-top: 25px } /* ==========================================================================Contact========================================================================== */ .up-btn { width:55px; height:55px; # background: rgba(255, 232, 1, 0.9); background: #FFF8E3; display:block; margin:0 auto; color: #E04343; font-size:18px; line-height:52px; text-align:center; position:absolute; top:-26px; left:0; right:0; margin-left:auto; margin-right:auto; } .up-btn:hover,up-btn:focus { color: #FFF8E3; background: #E04343; } .contact-details { margin:70px 0; } .contact-details h2 { font-size:20px; } .contact-details h2 span { display:block; color:#545454; text-transform:uppercase; letter-spacing:1px; font-size:14px; margin-top:15px; } .contact-wrap { position:relative; } #googlemaps { width:100%; height:300px; left:15px; bottom:25px; } .contact { margin-top:-20px!important; } .contact label { float:left; } .contact .form-control { margin-bottom:20px; border:1px solid #cbcbcb; height:45px; } .contact textarea.form-control { height: 310px; } /* Inputs styles */ .contact .form-control { border-radius:0!important; ; -webkit-box-shadow:none; box-shadow:none; } .contact .form-control:focus { -webkit-box-shadow:none; box-shadow:none; border:1px solid #B0B0B0; } .btn-send{ background:#E04343; color: white; transition: all 0.4s; border-radius: 0; float: right; } .btn-send:hover{ background: #FFE800; color: #E04343 } button,button:focus,button:hover,button:active { outline: none!important; } /* ==========================================================================Footer========================================================================== */ footer a { color:#a1a9b0; } footer { background-color:#f3f5f8; padding:40px 0 30px; } footer p { color: #808080; } /* ==========================================================================FlexSlider Custom CSS========================================================================== */ #servicesSlider { margin-top:70px; } ul.slides li { margin-bottom:20px; } .features-slider { position:relative; padding:11% 100px 10% 100px; height:400px; background-color:#3F6184; } .features-slider ul { margin:0; padding:0; list-style:none; } .features-slider ul li { width:100%; } .features-slider li h1 { margin-bottom:15px; color:#fff; font-weight:400; font-size:22px; } .features-slider li p { color:#fff; font-size:14px; } #clientSlider .flex-control-nav { text-align:left; } #clientSlider .flex-control-nav li:first-child { margin:0px 4px 0px 0px; } #clientSlider small { font-size: 12px; font-weight: bold; } .flex-control-paging li a.flex-active { background: #E04343; border-color: #E04343; } .color-bg .flex-control-paging li a{ background: white; border-color: white; } .color-bg .flex-control-paging li a.flex-active { background: #FFE800; border-color: #FFE800; } /* ==========================================================================Waypoints========================================================================== */ .wp1,.wp2,.wp3,.wp4,.wp5,.wp6 { visibility:hidden; } .bounceInLeft,.bounceInRight,.fadeInUp,.fadeInUpDelay,.fadeInDown,.fadeInUpD,.fadeInLeft,.fadeInRight { visibility:visible; } .delay-05s { animation-delay:0.5s; -webkit-animation-delay:0.5s; } .delay-1s { animation-delay:1s; -webkit-animation-delay:1s; } .wp3 { background:url('../img/iphone-bg.png') no-repeat center center; background-position:200px 10px; height: 100%; } /* ==========================================================================Responsive========================================================================== */ /* 320px (iPhone) */ @media screen and (max-width:414px) { .scrollto { padding: 95px 0px 0px 0px; } .hero h1 { font-size: 80px; line-height: 80px; margin-top: 65px; } } @media screen and (max-width:725px) { .hero h3, .menu-wrap, .menu-button {display:none} } /* 480px (WVGA - Low End Windows Phone) */ @media screen and (max-width:480px) { .wrapper { background:#f3f5f8; height:640px; } .iphone { display:none; } .fluid-white { display:none; } .wp2,.wp4,.wp5,.light-box { margin-bottom: 30px; } } /* xGA iPad */ @media screen and (max-width:1024px) { .wp3 { background-position:50px 0; } .swag { background-attachment:scroll; } .subscribe { background-attachment: scroll; } } /* 1200px (Small Desktop,Netbook) */ @media screen and (max-width:1280px) { .wp3 { background-position: 50px 0; } } /* Bootstrap 990px Breakpoint to 480px */ @media screen and (min-width:480px) and (max-width:991px) { .iphone { display:none; } .fluid-white { display:none; } .wrapper { background:#f3f5f8; height:540px; } .wp2,.wp4,.wp5,.light-box { margin-bottom:30px; } } @media screen and (max-width:50em) { .icon-list a { padding:0.5em 0em; margin:0 5px; font-size:1em; } } /** Responsive fixes **/ @media screen and (max-width:767px) { .inner { padding-top: 10px; text-align: center; } .hero h3 { letter-spacing: 10px; } .hero { padding-bottom: 0; } .subscribe input[type=text] { width: 50%; margin-bottom: 30px; } .btn-send { float: none; margin-bottom: 80px; } .effects .img { margin-bottom: 15px; } } @media screen and (max-width:991px) { .hero { padding: 0px; } .subscribe { padding-bottom: 40px; } } /** Bootstrap Changes **/ .col-md-4 { width: 25%; } /** Bootstrap Changes **/ .col-md-5 { width: 20%; }