/* Template Name: Berra - Minimal Portfolio Template Template URI: https://devitems.com/html/berra-preview Description: This is Berra Minimal Portfolio Template Author: DevItems Author URI: https://devitems.com */ /************************* General *************************/ @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700'); body { /* font-family: 'Montserrat';*/ font-weight: normal; font-style: normal; font-size: 14px; color:#5a5a5a } h1, h2, h3, h4, h5, h6 { margin: 0 0 10px; color:#5a5a5a; /* font-family: 'Montserrat';*/ } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color:inherit; } ul{margin:0;padding:0;list-style:none} .img{ max-width: 100%; transition: all 0.3s ease-out 0s; } a, .btn { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .btn { border-radius: 0px; font-size: 14px; padding: 0px 15px; height: 30px; line-height: 30px; } p { font-family: "Lato",sans-serif; font-size: 14px; line-height: 26px; color: #757575; } a:focus, .btn:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: #888888; text-decoration: none; } a, button, input { outline: medium none; color: #5a5a5a; } a{ color:black; } label { font-size: 15px; font-weight: 400; color: #626262; } *::-moz-selection { background: #4fc1f0; color: #fff; text-shadow: none; } ::-moz-selection { background: #4fc1f0; color: #fff; text-shadow: none; } ::selection { background: #4fc1f0; color: #fff; text-shadow: none; } .mark, mark { background: #4fc1f0 none repeat scroll 0 0; color: #ffffff; } span.tooltip-content { color: #00a9da; cursor: help; font-weight: 600; } .f-left { float: left } .f-ight { float: right } .fix { overflow: hidden } .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } p:last-child { margin-bottom: 0; } /*************************** transtion ****************************/ a.button::after, a.button-small::after { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .share ul, .share:hover ul { transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; } a.button-border span, a.button-border-white span, input, select, textarea { -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } /************************* social-icon *************************/ .social-icon ul { margin: 0; padding: 0; } .social-icon ul li { display: inline-block; list-style: none; } .social-icon ul li a { display: block; margin: 3px; width: 50px; height: 50px; line-height: 50px; font-size: 16px; color: #fff; background: #4FC1F0; text-align: center; border-radius: 50%; } .social-icon ul li a:hover { background: #EB3B60; } .social-icon.socile-icon-style-2 ul li a { color: #fff; background: #323232; border-radius: 0;} .social-icon.socile-icon-style-2 ul li a:hover { background: #EB3B60; } .social-icon.socile-icon-style-3 ul li a { color: #fff; background: transparent; border:1px solid #fff; } .social-icon.socile-icon-style-3 ul li a:hover { background: #EB3B60; border-color:#EB3B60; } /************************* Text color *************************/ .text-blue { color: #4FC1F0; } .text-white { color: #fff ;} .text-black { color: #363636; } .text-theme { color: #f10; } .text-white h1, .text-white p, .text-white h2{ color: #fff; } .text-white { color: #fff; } .text-black { color: #363636 ;} .text-theme { color: #f10; } /************************* Input *************************/ input { background: #eceff8; border: 2px solid #eceff8; height: 45px; box-shadow: none; padding-left: 10px; font-size: 14px; color: #626262; width: 100%; } select { width: 100%; background: #eceff8; border: 2px solid #eceff8; height: 45px; padding-left: 10px; box-shadow: none; font-size: 14px; color: #626262; } option { background: #fff; border: 0px solid #626262; padding-left: 10px; font-size: 14px; } input:focus { background: transparent; border: 2px solid #4FC1F0; } textarea { resize: vertical; background: #eceff8; border: 2px solid #eceff8; padding: 10px; width: 100%; font-size: 14px; } textarea:focus { background: transparent; border: 2px solid #4FC1F0; outline: none; } ::-moz-placeholder { color: #444; font-size: 13px; } .input-group.divcenter.input-group .form-control { padding-left: 0px } /************************* back-to-top *************************/ #back-to-top .top { z-index: 999; position: fixed; margin: 0px; color: #fff; transition: all .5s ease-in-out; position: fixed; bottom: 105px; right: 15px; border-radius: 3px; z-index: 999; background: transparent; font-size: 14px; background: #4FC1F0; width: 40px; height: 40px; text-align: center; line-height: 38px; } #back-to-top .top:hover { color: #fff; height: 50px; } #back-to-top .top { background: #007da1; } /************************* Basic margin padding *************************/ .m-0 { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; } .p-0 { padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; } /************************* Margin top *************************/ .mt-0 { margin-top: 0 } .mt-10 { margin-top: 10px } .mt-15 { margin-top: 15px } .mt-20 { margin-top: 20px } .mt-30 { margin-top: 30px } .mt-40 { margin-top: 40px } .mt-50 { margin-top: 50px } .mt-60 { margin-top: 60px } .mt-70 { margin-top: 70px } .mt-80 { margin-top: 80px } .mt-90 { margin-top: 90px } .mt-100 { margin-top: 100px } .mt-110 { margin-top: 110px } .mt-120 { margin-top: 120px } .mt-130 { margin-top: 130px } .mt-140 { margin-top: 140px } .mt-150 { margin-top: 150px } /************************* Margin right *************************/ .mr-0 { margin-right: 0px } .mr-10 { margin-right: 10px } .mr-15 { margin-right: 15px } .mr-20 { margin-right: 20px } .mr-30 { margin-right: 30px } .mr-40 { margin-right: 40px } .mr-50 { margin-right: 50px } .mr-60 { margin-right: 60px } .mr-70 { margin-right: 70px } .mr-80 { margin-right: 80px } .mr-90 { margin-right: 90px } .mr-100 { margin-right: 100px } .mr-110 { margin-right: 110px } .mr-120 { margin-right: 120px } .mr-130 { margin-right: 130px } .mr-140 { margin-right: 140px } .mr-150 { margin-right: 150px } /************************* Margin bottom *************************/ .mb-0 { margin-bottom: 0 } .mb-10 { margin-bottom: 10px } .mb-15 { margin-bottom: 15px } .mb-20 { margin-bottom: 20px } .mb-30 { margin-bottom: 30px } .mb-40 { margin-bottom: 40px } .mb-50 { margin-bottom: 50px } .mb-60 { margin-bottom: 60px } .mb-70 { margin-bottom: 70px } .mb-80 { margin-bottom: 80px } .mb-90 { margin-bottom: 90px } .mb-100 { margin-bottom: 100px } .mb-110 { margin-bottom: 110px } .mb-120 { margin-bottom: 120px } .mb-130 { margin-bottom: 130px } .mb-140 { margin-bottom: 140px } .mb-150 { margin-bottom: 150px } /************************* Margin left *************************/ .ml-0 { margin-left: 0 } .ml-10 { margin-left: 10px } .ml-15 { margin-left: 15px } .ml-20 { margin-left: 20px } .ml-30 { margin-left: 30px } .ml-40 { margin-left: 40px } .ml-50 { margin-left: 50px } .ml-60 { margin-left: 60px } .ml-70 { margin-left: 70px } .ml-80 { margin-left: 80px } .ml-90 { margin-left: 90px } .ml-100 { margin-left: 100px } .ml-110 { margin-left: 110px } .ml-120 { margin-left: 120px } .ml-130 { margin-left: 130px } .ml-140 { margin-left: 140px } .ml-150 { margin-left: 150px } /************************* Padding top *************************/ .pt-0 { padding-top: 0 } .pt-10 { padding-top: 10px } .pt-15 { padding-top: 15px } .pt-20 { padding-top: 20px } .pt-30 { padding-top: 30px } .pt-40 { padding-top: 40px } .pt-50 { padding-top: 50px } .pt-60 { padding-top: 60px } .pt-70 { padding-top: 70px } .pt-80 { padding-top: 80px } .pt-90 { padding-top: 90px } .pt-100 { padding-top: 100px } .pt-110 { padding-top: 110px } .pt-120 { padding-top: 120px } .pt-130 { padding-top: 130px } .pt-140 { padding-top: 140px } .pt-150 { padding-top: 150px } .pt-175 { padding-top: 175px } /************************* Padding right *************************/ .pr-0 { padding-right: 0 } .pr-10 { padding-right: 10px } .pr-15 { padding-right: 15px } .pr-20 { padding-right: 20px } .pr-30 { padding-right: 30px } .pr-40 { padding-right: 40px } .pr-50 { padding-right: 50px } .pr-60 { padding-right: 60px } .pr-70 { padding-right: 70px } .pr-80 { padding-right: 80px } .pr-90 { padding-right: 90px } .pr-100 { padding-right: 100px } .pr-110 { padding-right: 110px } .pr-120 { padding-right: 120px } .pr-130 { padding-right: 130px } .pr-140 { padding-right: 140px } .pr-150 { padding-right: 150px } .pr-200 { padding-right: 200px } /************************* Padding bottom *************************/ .pb-0 { padding-bottom: 0 } .pb-10 { padding-bottom: 10px } .pb-15 { padding-bottom: 15px } .pb-20 { padding-bottom: 20px } .pb-30 { padding-bottom: 30px } .pb-40 { padding-bottom: 40px } .pb-50 { padding-bottom: 50px } .pb-60 { padding-bottom: 60px } .pb-70 { padding-bottom: 70px } .pb-80 { padding-bottom: 80px } .pb-90 { padding-bottom: 90px } .pb-95 { padding-bottom: 95px } .pb-100 { padding-bottom: 100px } .pb-105 { padding-bottom: 105px } .pb-110 { padding-bottom: 110px } .pb-120 { padding-bottom: 120px } .pb-125 { padding-bottom: 125px } .pb-130 { padding-bottom: 130px } .pb-140 { padding-bottom: 140px } .pb-150 { padding-bottom: 150px } /************************* Padding left *************************/ .pl-0 { padding-left: 0 } .pl-10 { padding-left: 10px } .pl-15 { padding-left: 15px } .pl-20 { padding-left: 20px } .pl-30 { padding-left: 30px } .pl-40 { padding-left: 40px } .pl-50 { padding-left: 50px } .pl-60 { padding-left: 60px } .pl-70 { padding-left: 70px } .pl-80 { padding-left: 80px } .pl-90 { padding-left: 90px } .pl-100 { padding-left: 100px } .pl-110 { padding-left: 110px } .pl-120 { padding-left: 120px } .pl-130 { padding-left: 130px } .pl-140 { padding-left: 140px } .pl-150 { padding-left: 150px } .pl-200 { padding-left: 200px } /*************************** Page section padding ****************************/ .ptb-0 { padding: 0 } .ptb-10 { padding: 10px 0 } .ptb-20 { padding: 20px 0 } .ptb-30 { padding: 30px 0 } .ptb-40 { padding: 40px 0 } .ptb-50 { padding: 50px 0 } .ptb-60 { padding: 60px 0 } .ptb-70 { padding: 70px 0 } .ptb-80 { padding: 80px 0 } .ptb-90 { padding: 90px 0 } .ptb-100 { padding: 100px 0 } .ptb-110 { padding: 110px 0 } .ptb-120 { padding: 120px 0 } .ptb-130 { padding: 130px 0 } .ptb-140 { padding: 140px 0 } .ptb-150 { padding: 150px 0 } .ptb-160 { padding: 160px 0 } .ptb-200 { padding: 200px 0 } .ptb-250 { padding: 250px 0 } .ptb-300 { padding: 300px 0 } .ptb-310 { padding: 310px 0 } .ptb-345 { padding: 345px 0 } .ptb-400 { padding: 400px 0 } /*************************** Page section margin ****************************/ .mtb-0 { margin: 0 } .mtb-10 { margin: 10px 0 } .mtb-15 { margin: 15px 0 } .mtb-20 { margin: 20px 0 } .mtb-30 { margin: 30px 0 } .mtb-40 { margin: 40px 0 } .mtb-50 { margin: 50px 0 } .mtb-60 { margin: 60px 0 } .mtb-70 { margin: 70px 0 } .mtb-80 { margin: 80px 0 } .mtb-90 { margin: 90px 0 } .mtb-100 { margin: 100px 0 } .mtb-110 { margin: 110px 0 } .mtb-120 { margin: 120px 0 } .mtb-130 { margin: 130px 0 } .mtb-140 { margin: 140px 0 } .mtb-150 { margin: 150px 0; } /*Custom cloumn*/ .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10 { float: left; } .col-1{ width: 10%; } .col-2{ width: 20%; } .col-3{ width: 30%; } .col-4{ width: 40%; } .col-5{ width: 50%; } .col-6{ width: 60%; } .col-7{ width: 70%; } .col-8{ width: 80%; } .col-9{ width: 90%; } .col-10{ width: 100%; } /************************************* Background variation set **************************************/ /*colored background*/ .white-bg { background: #fff } .gray-bg { background: #f7f7f7 } .blue-bg { background: #4FC1F0} .default-bg { background: #50C1F0 } .transparent-bg { background: transparent } /*tooltip*/ .socile-icon-tooltip [data-tooltip], .socile-icon-tooltip .tooltip { cursor: pointer; position: relative; } .socile-icon-tooltip [data-tooltip]::before, .socile-icon-tooltip [data-tooltip]::after, .socile-icon-tooltip .tooltip::before, .socile-icon-tooltip .tooltip::after { opacity: 0; pointer-events: none; position: absolute; transform: translate3d(0px, 0px, 0px); transition: opacity 0.2s ease-in-out 0s, visibility 0.2s ease-in-out 0s, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24) 0s; visibility: hidden; } .socile-icon-tooltip [data-tooltip]:hover::before, .socile-icon-tooltip [data-tooltip]:hover::after, .socile-icon-tooltip [data-tooltip]:focus::before, .socile-icon-tooltip [data-tooltip]:focus::after, .socile-icon-tooltip .tooltip:hover::before, .socile-icon-tooltip .tooltip:hover::after, .socile-icon-tooltip .tooltip:focus::before, .socile-icon-tooltip .tooltip:focus::after { opacity: 1; visibility: visible; } .socile-icon-tooltip .tooltip::before, .socile-icon-tooltip [data-tooltip]::before { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 6px solid rgba(0, 0, 0, 0); content: ""; z-index: 1001; } .socile-icon-tooltip .tooltip::after, .socile-icon-tooltip [data-tooltip]::after { background-color: #00a9da; border-radius: 3px; color: #ffffff; content: attr(data-tooltip); font-size: 14px; line-height: 1.2; padding: 8px; text-align: center; width: 100px; z-index: 1000; } .socile-icon-tooltip [data-tooltip]::before, .socile-icon-tooltip [data-tooltip]::after, .socile-icon-tooltip .tooltip::before, .socile-icon-tooltip .tooltip::after, .socile-icon-tooltip .tooltip-top::before, .socile-icon-tooltip .tooltip-top::after { bottom: 100%; left: 50%; } .socile-icon-tooltip [data-tooltip]::before, .socile-icon-tooltip .tooltip::before, .socile-icon-tooltip .tooltip-top::before { border-top-color: #00a9da; margin-bottom: -12px; margin-left: -6px; } .socile-icon-tooltip [data-tooltip]::after, .socile-icon-tooltip .tooltip::after, .socile-icon-tooltip .tooltip-top::after { margin-left: -50px; } .socile-icon-tooltip [data-tooltip]:hover::before, .socile-icon-tooltip [data-tooltip]:hover::after, .socile-icon-tooltip [data-tooltip]:focus::before, .socile-icon-tooltip [data-tooltip]:focus::after, .socile-icon-tooltip .tooltip:hover::before, .socile-icon-tooltip .tooltip:hover::after, .socile-icon-tooltip .tooltip:focus::before, .socile-icon-tooltip .tooltip:focus::after, .socile-icon-tooltip .tooltip-top:hover::before, .socile-icon-tooltip .tooltip-top:hover::after, .socile-icon-tooltip .tooltip-top:focus::before, .socile-icon-tooltip .tooltip-top:focus::after { transform: translateY(-25px); } .bg-opacity {position:relative} .bg-opacity::before { background: #fff none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.7; position: absolute; top: 0; width: 100%; } /*image background*/ .bg-2 { } .bg-1 { background-image: url(../../img/bg/footer.jpg);} .bg-2 { background-image: url(../../img/bg/breadcrumb.jpg);background-size: cover;background-position: center center;} .bg-3 { background-image: url("../../img/slider/1.jpg"); background-position: center center; background-size: cover; } .bg-7 { background-image: url("../../img/slider/6.jpg"); background-position: center center; background-size: cover; } .bg-5 { background-image: url(../../img/bg/breadcrumb.jpg);} .bg-6 { background-image: url(../../img/bg/breadcrumb.jpg);}