/*** ==================================================================== Global Settings ==================================================================== ***/ * { margin:0px; padding:0px; border:none; outline:none; } /*** ==================================================================== Global Settings ==================================================================== ***/ body { font-size:15px; color:#333; line-height:28px; font-weight:400; background:#ffffff; font-family: 'Roboto', sans-serif; background-size:cover; background-repeat:no-repeat; background-position:center top; -webkit-font-smoothing: antialiased; } @media (min-width:1200px) { .container { max-width: 1170px; padding: 0px 15px; } } .large-container{ max-width: 1700px; padding: 0px 15px; margin: 0 auto; } .container-fluid{ padding: 0px; } .auto-container{ position:static; max-width:1170px; padding:0px 15px; margin:0 auto; } .auto-container p { color: #fff; } .small-container{ max-width:680px; margin:0 auto; } .boxed_wrapper{ position: relative; margin: 0 auto; overflow: hidden !important; width: 100%; min-width: 300px; } a{ text-decoration:none; transition:all 500ms ease; -moz-transition:all 500ms ease; -webkit-transition:all 500ms ease; -ms-transition:all 500ms ease; -o-transition:all 500ms ease; } a:hover{ text-decoration:none; outline:none; } input,button,select,textarea{ font-family: 'Roboto', sans-serif; font-weight: 400; font-size: 16px; } ul,li{ list-style:none; padding:0px; margin:0px; } input{ transition: all 500ms ease; } button:focus, input:focus, textarea:focus{ outline: none; box-shadow: none; transition: all 500ms ease; } p{ position: relative; font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 28px; color: #333333; font-weight: 300; margin: 0px; transition: all 500ms ease; } h1,h2,h3,h4,h5,h6{ position:relative; font-family: 'Noto Serif', serif; font-weight: 400; color: #FFFFFF; margin: 0px; transition: all 500ms ease; } /* Preloader */ .preloader{ min-height: 100vh; color: #fff; display: flex; justify-content: center; align-items: center; background: #fff; position: fixed; z-index: 1999999999; width: 100%; } .preloader .boxes{ --size: 30px; --duration: 800ms; height: calc(var(--size) * 2); width: calc(var(--size) * 3); position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; margin-top: calc(var(--size) * 1.5 * -1); -webkit-transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px); transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px); } .preloader .boxes .box{ width: var(--size); height: var(--size); top: 0; left: 0; position: absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .preloader .boxes .box:nth-child(1){ -webkit-transform: translate(100%, 0); transform: translate(100%, 0); -webkit-animation: box1 var(--duration) linear infinite; animation: box1 var(--duration) linear infinite; } .preloader .boxes .box:nth-child(2){ -webkit-transform: translate(0, 100%); transform: translate(0, 100%); -webkit-animation: box2 var(--duration) linear infinite; animation: box2 var(--duration) linear infinite; } .preloader .boxes .box:nth-child(3){ -webkit-transform: translate(100%, 100%); transform: translate(100%, 100%); -webkit-animation: box3 var(--duration) linear infinite; animation: box3 var(--duration) linear infinite; } .preloader .boxes .box:nth-child(4){ -webkit-transform: translate(200%, 0); transform: translate(200%, 0); -webkit-animation: box4 var(--duration) linear infinite; animation: box4 var(--duration) linear infinite; } .preloader .boxes .box > div{ --background: #4a3b9f; --top: auto; --right: auto; --bottom: auto; --left: auto; --translateZ: calc(var(--size) / 2); --rotateY: 0deg; --rotateX: 0deg; position: absolute; width: 100%; height: 100%; background: var(--background); top: var(--top); right: var(--right); bottom: var(--bottom); left: var(--left); -webkit-transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ)); transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ)); } .preloader .boxes .box > div:nth-child(1){ --top: 0; --left: 0; } .preloader .boxes .box > div:nth-child(2){ --background: #5142a4; --right: 0; --rotateY: 90deg; } .preloader .boxes .box > div:nth-child(3){ --background: #5142a3; --rotateX: -90deg; } .preloader .boxes .box > div:nth-child(4){ --background: #4a3b9f; --top: 0; --left: 0; --translateZ: calc(var(--size) * 3 * -1); } @-webkit-keyframes box1 { 0%, 50% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } 100% { -webkit-transform: translate(200%, 0); transform: translate(200%, 0); } } @keyframes box1 { 0%, 50% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } 100% { -webkit-transform: translate(200%, 0); transform: translate(200%, 0); } } @-webkit-keyframes box2 { 0% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } } @keyframes box2 { 0% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } 50% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } } @-webkit-keyframes box3 { 0%, 50% { -webkit-transform: translate(100%, 100%); transform: translate(100%, 100%); } 100% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } } @keyframes box3 { 0%, 50% { -webkit-transform: translate(100%, 100%); transform: translate(100%, 100%); } 100% { -webkit-transform: translate(0, 100%); transform: translate(0, 100%); } } @-webkit-keyframes box4 { 0% { -webkit-transform: translate(200%, 0); transform: translate(200%, 0); } 50% { -webkit-transform: translate(200%, 100%); transform: translate(200%, 100%); } 100% { -webkit-transform: translate(100%, 100%); transform: translate(100%, 100%); } } @keyframes box4 { 0% { -webkit-transform: translate(200%, 0); transform: translate(200%, 0); } 50% { -webkit-transform: translate(200%, 100%); transform: translate(200%, 100%); } 100% { -webkit-transform: translate(100%, 100%); transform: translate(100%, 100%); } } .centred{ text-align: center; } .pull-left{ float: left; } .pull-right{ float: right; } figure{ margin: 0px; } img { display: inline-block; max-width: 100%; height: auto; transition-delay: .1s; transition-timing-function: ease-in-out; transition-duration: .7s; transition-property: all; } /** button **/ .theme-btn-one{ position: relative; display: inline-block; font-size: 17px; line-height: 26px; font-family: 'Roboto', sans-serif; font-weight: 500; color: #fff !important; text-align: center; padding: 15px 40px; border-radius: 30px; text-align: center; text-transform: uppercase; z-index: 1; transition: all 500ms ease; } .theme-btn-one:hover{ } .theme-btn-one:before{ position: absolute; content: ''; border-radius: 30px; width: 100%; height: 100%; left: 0px; top: 0px; transform: scale(0,0); z-index: -1; transition: all 500ms ease; } .theme-btn-one:hover:before{ transform: scale(1,1); } .theme-btn-two{ position: relative; display: inline-block; font-size: 15px; line-height: 26px; font-family: 'Rubik', sans-serif; color: #222; font-weight: 500; border: 1px solid #e5e5e5; padding: 11px 34px; z-index: 1; } .theme-btn-two:hover{ color: #fff; box-shadow: 0 10px 20px rgba(227, 160, 135, 0.3); } .theme-btn-two:before{ position: absolute; content: ''; width: 0%; height: 100%; left: 0px; top: 0px; z-index: -1; transition: all 500ms ease; } .theme-btn-two:after{ position: absolute; content: ''; width: 0%; height: 100%; right: 0px; top: 0px; z-index: -1; transition: all 500ms ease; } .theme-btn-two:hover:before, .theme-btn-two:hover:after{ width: 50% } .pagination{ position: relative; display: block; } .pagination li{ display: inline-block; margin: 0px 2px; } .pagination li a{ position: relative; display: inline-block; font-size: 16px; height: 50px; width: 50px; line-height: 50px; background: #f1f0f6; border-radius: 50%; text-align: center; font-family: 'Roboto', sans-serif; color: #222; font-weight: 300; z-index: 1; transition: all 500ms ease; } .pagination li a:hover, .pagination li a.active{ color: #fff; } .sec-pad{ padding: 125px 0px 130px 0px; } .sec-pad-2{ padding: 130px 0px !important; } .scroll-top{ width: 55px; height: 55px; line-height: 55px; position: fixed; bottom: 105%; right: 55px; font-size: 20px; z-index: 99; color: #ffffff; text-align: center; cursor: pointer; transition: .5s ease; } .scroll-top.open { bottom: 100px; } .sec-title{ position: relative; display: block; margin-bottom: 55px; } .sec-title.centred{ text-align: center !important; } .sec-title p{ position: relative; display: block; font-size: 14px; line-height: 26px; font-weight: 500; margin-bottom: 4px; } .sec-title.light p{ color: #fff; } .sec-title.centred .shape{ margin: 0 auto 18px auto !important; left: -12.5px; } .sec-title .shape{ position: relative; width: 25px; height: 5px; margin-bottom: 18px; } .sec-title .shape:before{ position: absolute; content: ''; width: 70px; height: 1px; left: 0px; top: 0px; } .sec-title .shape:after{ position: absolute; content: ''; width: 70px; height: 1px; left: 0px; bottom: 0px; } .sec-title h2{ position: relative; display: block; font-size: 48px; line-height: 60px; color: #222; font-weight: 400; margin: 0px; } .sec-title.light h2{ color: #fff; } .float-bob-y { animation-name: float-bob-y; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: float-bob-y; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: float-bob-y; -moz-animation-duration: 2s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob-y; -ms-animation-duration: 2s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob-y; -o-animation-duration: 2s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .float-bob-x{ animation-name: float-bob-x; animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: float-bob-x; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: float-bob-x; -moz-animation-duration: 15s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob-x; -ms-animation-duration: 15s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob-x; -o-animation-duration: 15s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .float-bob-x-2{ animation-name: float-bob-x; animation-duration: 25s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: float-bob-x; -webkit-animation-duration: 25s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: float-bob-x; -moz-animation-duration: 25s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: float-bob-x; -ms-animation-duration: 25s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: float-bob-x; -o-animation-duration: 25s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .rotate-me { animation-name: rotateme; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: rotateme; -webkit-animation-duration: 30s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: rotateme; -moz-animation-duration: 30s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: rotateme; -ms-animation-duration: 30s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: rotateme; -o-animation-duration: 30s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } .rotate-me-2 { animation-name: rotateme-2; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-name: rotateme-2; -webkit-animation-duration: 30s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: rotateme-2; -moz-animation-duration: 30s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: rotateme-2; -ms-animation-duration: 30s; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; -o-animation-name: rotateme-2; -o-animation-duration: 30s; -o-animation-iteration-count: infinite; -o-animation-timing-function: linear; } /* margin */ .mt-5 { margin-top: 5px; } .mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-35 { margin-top: 35px; } .mt-40 { margin-top: 40px; } .mt-45 { margin-top: 45px; } .mt-50 { margin-top: 50px; } .mt-55 { margin-top: 55px; } .mt-60 { margin-top: 60px; } .mt-65 { margin-top: 65px; } .mt-70 { margin-top: 70px; } .mt-75 { margin-top: 75px; } .mt-80 { margin-top: 80px; } .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-35 { margin-bottom: 35px; } .mb-40 { margin-bottom: 40px; } .mb-45 { margin-bottom: 45px; } .mb-50 { margin-bottom: 50px; } .mb-55 { margin-bottom: 55px; } .mb-60 { margin-bottom: 60px; } .mb-65 { margin-bottom: 65px; } .mb-70 { margin-bottom: 70px; } .mb-75 { margin-bottom: 75px; } .mb-80 { margin-bottom: 80px; } .ml-5 { margin-left: 5px; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-25 { margin-left: 25px; } .ml-30 { margin-left: 30px; } .ml-35 { margin-left: 35px; } .ml-40 { margin-left: 40px; } .ml-45 { margin-left: 45px; } .ml-50 { margin-left: 50px; } .ml-55 { margin-left: 55px; } .ml-60 { margin-left: 60px; } .ml-65 { margin-left: 65px; } .ml-70 { margin-left: 70px; } .ml-75 { margin-left: 75px; } .ml-80 { margin-left: 80px; } .mr-5 { margin-right: 5px; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-25 { margin-right: 25px; } .mr-30 { margin-right: 30px; } .mr-35 { margin-right: 35px; } .mr-40 { margin-right: 40px; } .mr-45 { margin-right: 45px; } .mr-50 { margin-right: 50px; } .mr-55 { margin-right: 55px; } .mr-60 { margin-right: 60px; } .mr-65 { margin-right: 65px; } .mr-70 { margin-right: 70px; } .mr-75 { margin-right: 75px; } .mr-80 { margin-right: 80px; } /* padding */ .pt-5 { padding-top: 5px; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pt-25 { padding-top: 25px; } .pt-30 { padding-top: 30px; } .pt-35 { padding-top: 35px; } .pt-40 { padding-top: 40px; } .pt-45 { padding-top: 45px; } .pt-50 { padding-top: 50px; } .pt-55 { padding-top: 55px; } .pt-60 { padding-top: 60px; } .pt-65 { padding-top: 65px; } .pt-70 { padding-top: 70px; } .pt-75 { padding-top: 75px; } .pt-80 { padding-top: 80px; } .pb-5 { padding-bottom: 5px; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pb-25 { padding-bottom: 25px; } .pb-30 { padding-bottom: 30px; } .pb-35 { padding-bottom: 35px; } .pb-40 { padding-bottom: 40px; } .pb-45 { padding-bottom: 45px; } .pb-50 { padding-bottom: 50px; } .pb-55 { padding-bottom: 55px; } .pb-60 { padding-bottom: 60px; } .pb-65 { padding-bottom: 65px; } .pb-70 { padding-bottom: 70px; } .pb-75 { padding-bottom: 75px; } .pb-80 { padding-bottom: 80px; } .pl-5 { padding-left: 5px; } .pl-10 { padding-left: 10px; } .pl-15 { padding-left: 15px; } .pl-20 { padding-left: 20px; } .pl-25 { padding-left: 25px; } .pl-30 { padding-left: 30px; } .pl-35 { padding-left: 35px; } .pl-40 { padding-left: 40px; } .pl-45 { padding-left: 45px; } .pl-50 { padding-left: 50px; } .pl-55 { padding-left: 55px; } .pl-60 { padding-left: 60px; } .pl-65 { padding-left: 65px; } .pl-70 { padding-left: 70px; } .pl-75 { padding-left: 75px; } .pl-80 { padding-left: 80px; } .pr-5 { padding-right: 5px; } .pr-10 { padding-right: 10px; } .pr-15 { padding-right: 15px; } .pr-20 { padding-right: 20px; } .pr-25 { padding-right: 25px; } .pr-30 { padding-right: 30px; } .pr-35 { padding-right: 35px; } .pr-40 { padding-right: 40px; } .pr-45 { padding-right: 45px; } .pr-50 { padding-right: 50px; } .pr-55 { padding-right: 55px; } .pr-60 { padding-right: 60px; } .pr-65 { padding-right: 65px; } .pr-70 { padding-right: 70px; } .pr-75 { padding-right: 75px; } .pr-80 { padding-right: 80px; }