/* ENGLISH Sansation FONTS*/ @import url('../fonts/style.css'); /* QSW FONTs */ @font-face { font-family: QSWArabicRegular; src: url(../fonts/QSWArabic-Regular.otf); } @font-face { font-family: QSWArabicBold; src: url(../fonts/QSWArabic-Bold.otf); } /* BODY */ *{outline: none !important} body{margin: 0; padding: 0; font-family:'Sansation', sans-serif; font-size: 14px; color: #65656a; background: rgba(255,255,255);} body{-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale;} body{height: 100%;} html{height: 100%;} .ar-b{font-family:"QSWArabicBold";} .ar-r{font-family:"QSWArabicRegular";} /* HTML TAGS */ a{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;} img{ max-width: 100%;} strong{ font-weight: 700;} b{font-weight: 700;} /* CUSTOM TAGS */ .pull-left{ float: left;} .pull-right{ float: right;} .overflow-hidden{overflow: hidden;} /* SECTIONS */ main{ width: 100%; float: left; position: relative; padding-bottom:12.5%; } section{position: relative;} aside{position: relative;} footer{position: relative;} /* CONTENT */ .content{ width: calc(100% - 120px); float: left; background: #fff; margin: 0 60px;background-image:url(../lines.png),url(../bc1-011.png);background-size:100%,100%; background-repeat:no-repeat; background-position:left top, bottom center;} /* REVEAL EFFECT */ .reveal-effect { float: left; overflow: hidden; position: relative;} .reveal-effect>img { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(.785,.135,.15,.86); animation-timing-function: cubic-bezier(.785,.135,.15,.86); position: relative;} .reveal-effect>img { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .reveal-effect { -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform;} .reveal-effect {-webkit-transition-duration: 1.2s; transition-duration: 1.2s; -webkit-transition-timing-function: cubic-bezier(.25,.1,.25,1); transition-timing-function: cubic-bezier(.25,.1,.25,1);} .reveal-effect.animated {-webkit-transform: translate(0,0); transform: translate(0,0);} .reveal-effect.animated img {-webkit-animation-name: show-img-1;animation-name: show-img-1;} .reveal-effect:after {-webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(.785,.135,.15,.86); animation-timing-function: cubic-bezier(.785,.135,.15,.86);} .reveal-effect:after { content:""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0;} .reveal-effect:after{-webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.05,0); transform: scale(.05,0); -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(.785,.135,.15,.86); animation-timing-function: cubic-bezier(.785,.135,.15,.86);} .reveal-effect.se2-white:after { background-color: #1dcad3; } .reveal-effect.animated:after { -webkit-animation-name: slide-bg-2; animation-name: slide-bg-2;} /* PAGE TRANSITION */ .transition-overlay{ width:100%; height:100%; position:fixed; left:0; top:0; background:rgb(64,194,204); z-index:99999; opacity:0; visibility:hidden;} .transition-overlay{ -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;} .transition-overlay.show-me{ opacity:1; visibility:visible;} /* PRELOADER */ .preloader{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 99; background:#1dcad3; } .preloader{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease; } .preloader *{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease;} .preloader img{ width: 250px; height: 250px; position: absolute; left: 44%; top:50%; margin-left: -40px; margin-top: -40px; z-index: 4; border-radius: 50%; padding: 10px; background: #fff;} /* PAGE LOADED */ .page-loaded .preloader{ top: -100%; transition-delay: 0.60s;} .page-loaded .preloader img{ opacity: 0; margin-top: -120px; transition-delay: 0.30s;} .page-loaded .header{top: 0; opacity: 1; transition-delay: 0.6s;} .page-loaded .slider{transform: translateY(0); transition-delay: 0.6s; opacity: 1;} .page-loaded .int-hero .inner h2{transform: translateY(0); transition-delay: 0.6s; opacity: 1;} /* TEXT ROTATER*/ .text-rotater{ width: 100%; float: left; height: 20px; position: absolute; right:1.1%; top: 70%; margin-top: 120px; font-size: 11px; font-weight: 600; color: #fff; text-transform:uppercase;} .text-rotater li{ width: 100%; position: absolute; left: 1.1%; top: 0; text-align: center; opacity: 0; animation: play 4.5s infinite; } .text-rotater li:nth-child(2) { animation-delay: 1.5s; } .text-rotater li:nth-child(3) { animation-delay: 3s; } /* /* HEADER */ header {position:relative} header .top-header{padding: .04em; background: rgb(29,202,211); background: linear-gradient(37deg, rgba(29,202,211,1) 0%, rgba(120,102,161,1) 100%);} header .top-header .home{margin-left:5%;color:#fff;} header .top-header .language{color:#fff;position:absolute;left:8%} header .navbar{padding:1em; background-image:url(../header-01.svg),url(../lines.png);background-size:100%,50%;background-position:left,right;background-repeat:no-repeat} header .navbar-brand{width:10%;position:absolute;right:6%} header .navbar ul.navbar-nav {float:right; margin-left:10%} header .navbar ul li a{font-size:18px;color:#fff} header nav.navbar-bg{background-color: rgb(29,202,211); background-image:linear-gradient(37deg, rgba(29,202,211,1) 0%, rgba(120,102,161,1) 100%);} header .navbar-bg .navbar-brand img{-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);} /* SLIDER */ .slider{ width: 100%; height: 91vh; float: left; position: relative; top:-5px;background: #65656a; z-index: 1;} .slider{transform: translateY(250px); opacity: 0;} .slider{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;} .slider video {width: 100%; position: absolute; left: 0; top: 0; overflow: hidden; } .slider .video-bg{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; background:rgba(0,0,0,0.1);} .slider .swiper-container{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;} .slider .swiper-container{-webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -ms-transform:all 0.8s ease; transition: all 0.8s ease; } .slider .swiper-container .swiper-wrapper{ width: 100%; float: left; display: flex; flex-direction: row;} .slider .swiper-container:after{content:"";background-image:url(../images/curv.png);width:100%;height:100%;opacity:0.5;position:absolute;bottom:-100px;z-index:1;background-position:bottom;background-repeat:no-repeat;background-size:100%} /* SLIDER BUTTONS */ .slider .swiper-container .swiper-button-prev{ width: 40px; height: 26px; bottom:20px; float: left; left: 100px; right: auto; z-index: 6; background: none; overflow: hidden; text-align: right;} .slider .swiper-container .swiper-button-prev img{height: 26px;} .slider .swiper-container .swiper-button-prev span{width: 100%; float: left; line-height: 26px;} .slider .swiper-container .swiper-button-prev:hover img{transform: translateY(-100%);} .slider .swiper-container .swiper-button-prev:hover span{transform: translateY(-100%);} .slider .swiper-container .swiper-button-prev *{-webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease; } .slider .swiper-container .swiper-button-next{ width: 40px; height: 26px; float: right; right:100px; z-index: 6; background: none; overflow: hidden;} .slider .swiper-container .swiper-button-line{ width: 40px; height: 2px; background: #fff; position: absolute; left: 150px; top: 50%; z-index: 2; margin-top: -10px;} .slider .swiper-container .swiper-button-next img{height: 26px;} .slider .swiper-container .swiper-button-next span{width: 100%; float: left; line-height: 26px; } .slider .swiper-container .swiper-button-next:hover img{transform: translateY(-100%);} .slider .swiper-container .swiper-button-next:hover span{transform: translateY(-100%);} .slider .swiper-container .swiper-button-next *{ -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transform:all 0.4s ease; transition: all 0.4s ease; } /* SLIDER CONTENT */ .slider .swiper-container .swiper-slide{ color: #fff; display: flex; flex-direction: column; justify-content: center; background-size:cover;} .slider .swiper-container .swiper-slide:after{content: ""; width: 100%; height: 300px; position: absolute; left: 0; bottom: 0; z-index: 3; background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(101,101,106,1) 100%); background-image: -o-linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(19,19,20,1) 100%); background-image: -moz-linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(19,19,20,1) 100%); background-image: -webkit-linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(19,19,20,1) 100%); background-image: -ms-linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(19,19,20,1) 100%);} .slider .swiper-container .swiper-slide .inner { width: 100%; padding: 0 100px; position: relative; z-index: 4;} .slider .swiper-container .swiper-slide .inner h2{ max-width: 50%; font-family: "QSWArabicBold"; font-size: 6em; margin-bottom: 30px; text-shadow: 1px 1px .5px #ccc;text-align:right} .slider .swiper-container .swiper-slide .inner p{ max-width: 40%; font-family: "QSWArabicRegular"; line-height: 25px; margin-bottom: 30px;text-shadow: 1px 1px .5px #ccc;text-align:right} /* SLIDER LINKS */ .slider .swiper-container .swiper-slide .inner .link{ float: left; font-size: 12px; font-weight: 600; color: #fff; position: relative;} .slider .swiper-container .swiper-slide .inner .link:hover{ text-decoration: none;} .slider .swiper-container .swiper-slide .inner .link:before { content: ''; display: block; position: absolute; left: 0; bottom: 2px; height: 7px; width: 0; transition: width 0s ease, background .25s ease; mix-blend-mode: color;} .slider .swiper-container .swiper-slide .inner .link:after { content: ''; display: block; position: absolute; right: 0; bottom: 2px; height: 7px; width: 0; background: #56e9b1; transition: width .25s ease; mix-blend-mode: color;} .slider .swiper-container .swiper-slide .inner .link:hover:before { width: 100%; background: #56e9b1; transition: width .25s ease;} .slider .swiper-container .swiper-slide .inner .link:hover:after { width: 100%; background: transparent; transition: all 0s ease;} /* LINE EFFECT AFTER SLIDER*/ .spliter:before{height:70px;position:absolute;content:"";top:0;width:100%;background-image:url(../images/curv2.png);z-index:1;display:block;background-repeat:repeat-x;background-position:top} /* SIDE IMAGE CONTENT */ .side-image-content{width: 100%; float: left; display: flex; flex-direction: row; margin: 50px 0; overflow: hidden;} .side-image-content .inner {width: 50%; display: flex; justify-content: center; flex-direction: column; position: relative; z-index:1} .side-image-content .inner.bg1{ background: rgb(120,102,161); background: -moz-linear-gradient(45deg, rgba(24,75,215,0.9) 0%, rgba(108,0,174,0.9) 100%); background: -webkit-linear-gradient(45deg, rgba(24,75,215,0.9) 0%,rgba(108,0,174,0.9) 100%); background: linear-gradient(45deg, rgb(102, 102, 161) 0%,rgba(64, 194, 204,0.9) 100%); box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);} .side-image-content .inner .main-image{ width: 100%; float: right; margin-bottom:10px; } .side-image-content .inner .sub-image{ width: 250px; position: absolute; right: -50px; bottom: -100px; z-index: 2;} .side-image-content .inner img{ width: 100%; box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);transition:transform 3s} .side-image-content .inner img:hover{transform:scale(1.2,1.2)} .side-image-content .inner .contenty{ width: 100%; float: left; padding: 0 15%; color: #fff;} .side-image-content .inner .contenty h5{ font-size: 12px; font-weight: 700;} .side-image-content .inner .contenty h5:before{content: ""; width: 4px; height: 10px; float: left; background: #fff; margin-left: -10px; margin-top: 2px;} .side-image-content .inner .contenty:hover h3{ background:linear-gradient(to right,#697dff 10%,#fff 50%,#5bdaff 60%);background-size:200% auto;color:#fff;background-clip:text;text-fill-color:transparent;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:textclip 1.5s linear infinite;display:inline-block}@keyframes textclip{to{background-position:200% center}} .side-image-content .inner .contenty h2{ font-family: "SansationRegular"; font-size: 4em; margin-bottom: 30px; text-indent: -5px;} .side-image-content .inner .contenty p{ line-height: 25px;} .side-image-content .inner .contenty a{height: 60px; line-height: 58px; display: inline-block; border: 1px solid #fff; padding: 0 40px; font-size: 11px; font-weight: 700; color: #fff; margin-top: 30px; overflow: hidden;} .side-image-content .inner .contenty a *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;} .side-image-content .inner .contenty a span { position: relative; display: inline-block;} .side-image-content .inner .contenty a span:before {position: absolute;top: 100%; content: attr(data-hover); } .side-image-content .inner .contenty a span:before {-webkit-transform: translate3d(0,0,0);-moz-transform: translate3d(0,0,0);transform: translate3d(0,0,0);} .side-image-content .inner .contenty a:hover span{-webkit-transform: translateY(-100%);-moz-transform: translateY(-100%);transform: translateY(-100%);} .side-image-content canvas {position: absolute; top: 0; left: 0; width: 100%px; height: auto; z-index: 0; opacity:0.8; overflow:hidden; } #canvas {z-index: 0;} #canvasbg {z-index: -10; -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); filter: blur(3px); opacity: 0.6; } .card {display: block; text-align: center; color: #eeeeee;} .card .content {padding: 4rem 1rem;} .card .title {font-size: 1.25rem; background-color: gray; border-radius: 3px; padding: 0.5rem;} .card-3 .content {background-color: #cfa4cf !important; border-radius: 3px;} .card-3:before, .card-3:after { border-radius: 3px;} .card-3:before { background-color: #1dcad3 !important;} .card-3 .title, .card-3:after { background-color: #1dcad3 !important;} /* BRANCHS */ .branchs{ width: 100%; float: left; padding-top: 10px;padding-bottom: 10px; z-index: 1; } .branchs.bgk1{ background-color:#6F5292;background-image:url(../lines.png),url(../bcimg-01.svg);background-repeat:repeat-x,no-repeat; background-size:100%,80%;background-position:bottom right, bottom right} .branchs.bgk2{background-color:#ccc;background-image:url(../sa-01.svg),url(../lines.png),url(../bcimg-01.svg);background-repeat:no-repeat,repeat,no-repeat; background-size:100%,50%,70%;background-position:bottom right, bottom right} .branchs h5{ font-size: 12px; font-weight: 700; margin-top: 10px; float:right} .branchs h2{ font-family: "QSWArabicBold"; font-size: 4em; margin-bottom: 30px; color:#1dcad3; text-indent: -5px;} .branchs:hover h2{ background:linear-gradient(to right,#697dff 10%,#fff 50%,#5bdaff 60%);background-size:200% auto;color:#fff;background-clip:text;text-fill-color:transparent;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:textclip 1.5s linear infinite;display:inline-block}@keyframes textclip{to{background-position:200% center}} .branchs.container{width:1170px;max-width:100%} .branchs .owl-carousel{width:100%; float:right} .branchs .swiper-slide{text-align:center;font-size:18px;background:#fff;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;border-radius:100%} .branchs .swiper-slide [class*=" imghvr-"], [class^="imghvr-"]{background-color:transparent} .branchs .swiper-slide [class*=" imghvr-"] figcaption, .branchs .swiper-slide [class^="imghvr-"] figcaption{background-color:#1dcad3; } .branchs .swiper-slide h3{font-family:"QSWArabicBold"} .branchs .swiper-slide p{font-family:"QSWArabicRegular"; color:#fff} .branchs .swiper-pagination-fraction{position:relative;top:-4px;color:#1dcad3;left:-16px} .branchs .swiper-button-next{right:-3%} .branchs .swiper-button-prev{left:-3%} .branchs img {width:100%} .news{ width: 100%; float:right;left:0;text-align:right;overflow: hidden; } @keyframes circle-ani1{0%{transform:translateX(0px) translateY(0px)}20%{transform:translateX(20px) translateY(-10px)}40%{transform:translateX(-10px) translateY(-30px)}60%{transform:translateX(-20px) translateY(-10px)}80%{transform:translateX(10px) translateY(10px)}100%{transform:translateX(0px) translateY(0px)}} @keyframes circle-ani2{0%{transform:translateX(20px) translateY(0px)}20%{transform:translateX(-10px) translateY(20px)}40%{transform:translateX(0px) translateY(-10px)}60%{transform:translateX(20px) translateY(0px)}80%{transform:translateX(-10px) translateY(20px)}100%{transform:translateX(20px) translateY(0px)}} @keyframes circle-ani3{0%{transform:translateX(-30px) translateY(10px)}20%{transform:translateX(-10px) translateY(0px)}40%{transform:translateX(0px) translateY(-20px)}60%{transform:translateX(20px) translateY(10px)}80%{transform:translateX(15px) translateY(-20px)}100%{transform:translateX(-30px) translateY(10px)}} .circle-1{width:60px;height:60px;background-color:#8628dd;border:0;opacity:.3;position:absolute;border-radius:100%;bottom:-10px;right:0px;animation:circle-ani1 10s infinite;animation-timing-function:linear} .circle-2{width:120px;height:120px;background-color:#db8a3b99;border:0;opacity:.5;position:absolute;border-radius:100%;bottom:60px;left:5px;animation:circle-ani2 10s infinite;animation-timing-function:linear} .circle-3{width:30px;height:30px;background-color:rgba(64,194,204,1);border:0;opacity:.6;position:absolute;border-radius:100%;top:183px;left:78px;animation:circle-ani3 10s infinite;animation-timing-function:linear} .circle-4{width:180px;height:180px;background-color:#1dcad3;border:2px solid #fff;opacity:.6;position:absolute;border-radius:100%;bottom:-100px;left:100px;animation:circle-ani3 10s infinite;animation-timing-function:linear} .circle-5{width:50px;height:50px;background-color:#fff;border:0;opacity:.5;position:absolute;border-radius:100%;bottom:30px;left:298px;animation:circle-ani2 10s infinite;animation-timing-function:linear} .circle-6{width:300px;height:300px;background-color:#1dcad3;border:2px solid #1dcad3;opacity:.6;position:absolute;border-radius:100%;top:-150px;right:-80px;animation:circle-ani3 10s infinite;animation-timing-function:linear} .circle-7{width:165px;height:165px;background-color:#65656a;border:0;opacity:.45;position:absolute;border-radius:100%;top:71px;right:-106px;animation:circle-ani1 10s infinite;animation-timing-function:linear} .circle-8{width:20px;height:20px;background-color:#1dcad3;border:0;opacity:.7;position:absolute;border-radius:100%;top:183px;right:78px;animation:circle-ani2 10s infinite;animation-timing-function:linear} .news .col-md-4 .rounded, .news .col-sm-4 .rounded, .news .col-lg-4 .rounded{overflow:hidden} .news img.w-full{transition:transform 2s} .news img.w-full:hover{transform:scale(1.5,1.5); } .news .text-xl {position:relative;color:#1dcad3} .news a:hover {text-decoration:none;} .news .bg-purple{background-color:#7d6fa3} .news .bg-gray{background-color:rgb(139,127,113)} .news .bg-blue{background-color:rgb(37,116,187)} /* BLOG NEWS */ .blog-section{margin-top:1%;background-image:url(../lines.png); background-position:bottom; background-repeat:repeat; background-size:100%;} .blog-item .max-w-sm{background-color:rgba(0,0,0,.5); transition:margin 2s} .blog-item .max-w-sm:hover{box-shadow: 5px 10px 18px #888888; margin-top:-5px; margin-right:-2px;} .date .lp-date{width:75px;position:absolute;bottom:20px;} .date .lp-more{width:75px;line-height:20px;padding:0 2px;position:absolute;bottom:0;left:15px} .date:hover .lp-date,.blog-media:hover .lp-date{bottom:60px;margin:15px} .date:hover .lp-more,.blog-media:hover .lp-more{height:75px;line-height:75px} .last-posts-grid{background:url(../lines.png); background-size:50%;} .lp-item{width:25%;float:right;position:relative;text-decoration:none;text-align:center} .lp-item:hover{text-decoration:none} .lp-item:nth-child(4n + 5){clear:left} .lp-image{position:relative;overflow:hidden;} .lp-image img{transition: transform 4s ease-in;} .lp-more{width:75px;height:20px;line-height:20px;padding:0 2px;position:absolute;bottom:0;left:0;background:#1dcad3;font-size:10px;font-weight:700;text-transform:uppercase;text-align:center;white-space:nowrap;color:#fff;opacity:.9;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 300ms cubic-bezier(0.130,0.895,0.100,1);-webkit-transition:all 300ms cubic-bezier(0.130,0.895,0.100,1.275);-moz-transition:all 300ms cubic-bezier(0.130,0.895,0.100,1.275);-o-transition:all 300ms cubic-bezier(0.130,0.895,0.100,1.275);transition:all 300ms cubic-bezier(0.130,0.895,0.100,1.275);z-index:2} .lp-date{width:75px;padding:15px 5px;position:absolute;bottom:20px;left:0;background:rgba(255,255,255,.9);font-size:11px;font-weight:700;text-transform:uppercase;text-align:center;letter-spacing:1px;line-height:1.1;color:#222;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 300ms cubic-bezier(0.130,0.895,0.100,1);-webkit-transition:all 300ms cubic-bezier(0.130,0.895,0.100,1.275);-moz-transition:all 300ms cubic-bezier(0.130,0.895,0.100,1.275);-o-transition:all 300ms cubic-bezier(0.130,0.895,0.100,1.275);transition:all 300ms cubic-bezier(0.130,0.895,0.100,1.275);z-index:2} .lp-date-num{font-family:Montserrat,arial,sans-serif;font-size:30px} .lp-descr{position:relative;padding:23px 10px;color:#000;text-decoration:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .37s cubic-bezier(0.000,0.000,0.580,1.000);-moz-transition:all .27s cubic-bezier(0.000,0.000,0.580,1.000);-o-transition:all .27s cubic-bezier(0.000,0.000,0.580,1.000);-ms-transition:all .27s cubic-bezier(0.000,0.000,0.580,1.000);transition:all .27s cubic-bezier(0.000,0.000,0.580,1.000);z-index:2} .lp-title{font-family:QSWArabicBold; margin:0 0 4px;padding:0;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#1dcad3} .lp-author{font-family:"QSWArabicRegular","Times New Roman";font-size:12px;font-style:italic;color:#000;text-align:right} .lp-item:after{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:transparent;z-index:1;-webkit-transition:all .37s cubic-bezier(0.000,0.000,0.580,1.000);-moz-transition:all .27s cubic-bezier(0.000,0.000,0.580,1.000);-o-transition:all .27s cubic-bezier(0.000,0.000,0.580,1.000);-ms-transition:all .27s cubic-bezier(0.000,0.000,0.580,1.000);transition:all .27s cubic-bezier(0.000,0.000,0.580,1.000)} .lp-item:hover:after,.blog-media:hover:after{background:rgba(255,255,255,.35)} .lp-item:hover .lp-date,.blog-media:hover .lp-date{bottom:75px} .lp-item:hover .lp-more,.blog-media:hover .lp-more{height:75px;line-height:75px} .lp-item:hover .lp-descr{color:#999} .lp-item:hover .lp-image img{transform:rotate(20deg) scale(1.5,1.5);} .blog-media img{display:block;width:100%} .blog-link,.blog-link:hover{position:relative;overflow:hidden;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);background:#1dcad3;color:#fff; min-height:219px} .blog-link:after{display:none} .bl-text{display:table;width:100%;height:100%;position:absolute;top:0;left:0} .bl-text-sub{display:table-cell;padding-top:5px;vertical-align:middle;text-align:center} .bl-line-1{margin-bottom:4px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:9px;-webkit-transition:all .27s cubic-bezier(0.300,0.100,0.580,1.000);-moz-transition:all .27s cubic-bezier(0.300,0.100,0.580,1.000);-o-transition:all .27s cubic-bezier(0.300,0.100,0.580,1.000);-ms-transition:all .27s cubic-bezier(0.300,0.100,0.580,1.000);transition:all .27s cubic-bezier(0.300,0.100,0.580,1.000)} .bl-line-2{font-size:24px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#eaeaea;-webkit-transition:all .37s cubic-bezier(0.300,0.100,0.580,1.000);-moz-transition:all .37s cubic-bezier(0.300,0.100,0.580,1.000);-o-transition:all 37s cubic-bezier(0.300,0.100,0.580,1.000);-ms-transition:all .37s cubic-bezier(0.300,0.100,0.580,1.000);transition:all .37s cubic-bezier(0.300,0.100,0.580,1.000)} .bl-line-2 .serif{font-weight:400;text-transform:none;letter-spacing:0} .bl-icon{width:128px;height:128px;line-height:128px;text-align:center;position:absolute;top:50%;left:50%;margin:-105px 0 0 -64px;font-size:128px;color:rgba(255,255,255,.07);-webkit-transition:all .47s cubic-bezier(0.300,0.100,0.580,1.000);-moz-transition:all .47s cubic-bezier(0.300,0.100,0.580,1.000);-o-transition:all .47s cubic-bezier(0.300,0.100,0.580,1.000);-ms-transition:all .47s cubic-bezier(0.300,0.100,0.580,1.000);transition:all .47s cubic-bezier(0.300,0.100,0.580,1.000)} .blog-link:hover .bl-icon{margin-top:-70px;color:rgba(255,255,255,.1);-webkit-transform:scale(1.4);-moz-transform:scale(1.4);-o-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4)} .blog-link:hover .bl-line-1,.blog-link:hover .bl-line-2{opacity:0;-webkit-transform:translateY(50px) scale(.5);-moz-transform:translateY(50px) scale(.5);-o-transform:translateY(50px) scale(.5);-ms-transform:translateY(50px) scale(.5);transform:translateY(50px) scale(.5)} .blog-link:hover .bl-line-1{-webkit-transition:all .37s cubic-bezier(0.300,0.100,0.580,1.000);-moz-transition:all .37s cubic-bezier(0.300,0.100,0.580,1.000);-o-transition:all 37s cubic-bezier(0.300,0.100,0.580,1.000);-ms-transition:all .37s cubic-bezier(0.300,0.100,0.580,1.000);transition:all .37s cubic-bezier(0.300,0.100,0.580,1.000)} .blog-link:hover .bl-line-2{-webkit-transition:all .27s cubic-bezier(0.300,0.100,0.580,1.000);-moz-transition:all .27s cubic-bezier(0.300,0.100,0.580,1.000);-o-transition:all .27s cubic-bezier(0.300,0.100,0.580,1.000);-ms-transition:all .27s cubic-bezier(0.300,0.100,0.580,1.000);transition:all .27s cubic-bezier(0.300,0.100,0.580,1.000)} /* GRID IMAGE OVER */ .grid figure{position:relative;float:left;overflow:hidden;margin:10px 1%;min-width:350px;max-width:480px;max-height:360px;width:48%;height:auto;text-align:center;cursor:pointer;border-radius:50%} .grid figure img{position:relative;display:block;min-height:100%;max-width:100%;opacity:.8} .grid figure figcaption{padding:2em;color:#65656a;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden} .grid figure figcaption::after,.grid figure figcaption::before{pointer-events:none} .grid figure figcaption,.grid figure figcaption>a{position:absolute;top:0;left:0;width:100%;height:100%} .grid figure figcaption>a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;opacity:0} .grid figure h2{word-spacing:-.15em;font-weight:300} .grid figure h2 span{font-weight:800} .grid figure h2,.grid figure p{margin:0} .grid figure p{letter-spacing:1px;font-size:68.5%} /* JOURNAL BLOG */ .journal{ width: 100%; float: left; padding-bottom: 40px;} .journal *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;} .journal .post{ width: 100%; float: left; position: relative; margin-bottom: 80px;} .journal .post.detail{ width: 100%; float: left;} .journal .post.detail figure{margin-bottom: 50px;} .journal .post.detail .post-content{ padding: 0 15%;} .journal .post.detail .post-content.left{padding: 0 30px; width: 75%;} .journal .post.detail .post-content .author{ width: 100%; float: left; position: static; margin-bottom: 20px;} .journal .post.detail .post-content .author img{ width: 60px; border-radius: 50%; float: left; margin-right: 10px; opacity: 1;} .journal .post.detail .post-content .author small{line-height: 60px; opacity: 1;} .journal .post.detail .post-content .lead{line-height: 30px;} .journal .post.detail .post-content small{opacity: 0.4;} .journal .post.detail .post-content h3{ width: 100%; float: left; padding-right: 0; font-size: 3em;} .journal .post.detail .post-content blockquote{ width: 100%; float: left; border-left: 3px solid #eee; padding: 20px 0; padding-left: 30px;} .journal .post.detail .post-content blockquote p{margin-bottom: 10px;} .journal .post.detail .post-content blockquote h5{margin-bottom: 0; font-family: "SansationRegular";} .journal .post.detail .post-content p{ width: 100%; float: left; padding-right: 0;} .journal .post.highlight{width: 100%; float: left; position: relative; margin-bottom: 120px;} .journal .post.highlight figure{ width: 100%; float: left; margin: 0; } .journal .post.highlight figure img{ opacity: 0.4;} .journal .post.highlight .post-content{position: absolute; left: 0; bottom: 0; padding: 50px; padding-right: 40%; color: #fff;} .journal .post.highlight .post-content h3{font-size: 3em;} .journal .post.highlight .post-content .author{position: static;} .journal .post.highlight .post-content .author img{opacity: 1;} .journal .post.highlight .post-content .link{ font-weight: 700;} .journal .post.highlight .post-content p{opacity: 1;} .journal .post.highlight .post-content a{color: #fff;} .journal .post.highlight .post-content a:hover{color: #fff;} .journal .post.highlight:hover figure img{opacity: 0.6;} .journal .post figure{ width: 100%; float: left; margin-bottom: 20px; position:relative; background: #65656a; overflow: hidden;} .journal .post figure img{ width: 100%; float: left; opacity: 0.6;} .journal .post figure .author{ width: 100%; line-height: 50px; position: absolute; left: 30px; bottom: 30px; color: #fff;} .journal .post figure .author img{ width: 50px; border-radius: 50%; float: left; margin-right: 10px; border:3px solid rgba(255,255,255,0.2); opacity: 1;} .journal .post .post-content{ width: 100%; float: left;} .journal .post .post-content small{display: block; margin-bottom: 10px;} .journal .post .post-content small a{color: #65656a;} .journal .post .post-content h3{ display: block; font-family:"SansationRegular"; margin-bottom: 20px; padding-right: 15%;} .journal .post .post-content h3 a{color: #65656a;} .journal .post .post-content h3 a:hover{text-decoration: none; color: #1dcad3;} .journal .post .post-content p{line-height: 24px; opacity: 0.6; padding-right: 15%; margin-bottom: 30px;} .journal .post .post-content .link{ display: inline-block; color: #000; font-weight: 500; font-size: 12px; position: relative; z-index: 2;} .journal .post .post-content .link:hover{ text-decoration: none;} .journal .post .post-content .link:before { content: ''; display: block; position: absolute; left: 0; bottom: 2px; height: 7px; width: 0; transition: width 0s ease, background .25s ease; mix-blend-mode: color;} .journal .post .post-content .link:after { content: ''; display: block; position: absolute; right: 0; bottom: 2px; height: 7px; width: 0; background: #56e9b1; transition: width .25s ease; mix-blend-mode: color;} .journal .post .post-content .link:hover:before { width: 100%; background: #56e9b1; transition: width .25s ease;} .journal .post .post-content .link:hover:after { width: 100%; background: transparent; transition: all 0s ease;} .journal .post:hover figure img{opacity: 0.8; -moz-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05);} .journal .sidebar { width: 25%; float: left; padding:0 30px; border-left: 1px solid #eee; } .journal .sidebar .widget { width: 100%; float: left; margin-bottom: 30px; position: relative; } .journal .sidebar .widget .title { display: block; margin-bottom: 15px; font-size: 22px; font-family: "SansationRegular"; } .journal .sidebar .widget p { font-size: 13px; line-height: 20px; opacity: 0.7; } .journal .sidebar .widget form { width: 100%; float: left; border: 1px solid #eee; padding: 4px; } .journal .sidebar .widget form input[type="text"] { width: calc(100% - 60px); height: 40px; border: none; padding: 0 15px; background: none; } .journal .sidebar .widget form button { width: 50px; height: 40px; padding: 0; background: none; border:none; font-weight: 700; font-size: 13px; } .journal .sidebar .widget .tags { width: 100%; float: left; margin: 0; padding: 0; } .journal .sidebar .widget .tags li { float: left; margin-right: 6px; margin-bottom: 6px; padding: 0; list-style: none; } .journal .sidebar .widget .tags li a { height: 23px; line-height: 23px; float: left; border: 1px solid #eee; padding: 0 10px; font-size: 11px; font-weight: 600; color: #65656a; } .journal .sidebar .widget .tags li a:hover { background: #1dcad3; border-color: #1dcad3; text-decoration: none; color: #fff; } .journal .sidebar .widget .categories { width: 100%; float: left; margin: 0; padding: 0; } .journal .sidebar .widget .categories li { width: 100%; float: left; margin: 0; padding: 3px 0; list-style: none; } .journal .sidebar .widget .categories li span { float: right; opacity: 0.7; font-size: 12px; } .journal .sidebar .widget .categories li a { float: left; font-weight: 600; font-size: 12px; color: #65656a; opacity: 0.7; } .journal .sidebar .widget .gallery { width: 100%; float: left; margin: 0; padding: 0; background: none;} .journal .sidebar .widget .gallery li { width: 33.33333%; float: left; padding: 5px; margin: 0; list-style: none; } .journal .sidebar .widget .gallery li a { float: left; } .journal .sidebar .widget .gallery li img { width: 100%; float: left; } .journal .post-comment{ width: 75%; float: left; padding: 0 30px; margin-top: 50px;} .journal .post-comment h6{font-size: 20px; font-family: 'SansationRegular', serif; text-transform: uppercase; margin-bottom: 20px;} .journal .post-comment .comments{ width: 100%; float: left;} .journal .post-comment .comments .comment{ width: 100%; float: left; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee;} .journal .post-comment .comments .comment.inner{ padding-left: 80px;} .journal .post-comment .comments .comment .comment-avatar{ width: 80px; float: left; background: none;} .journal .post-comment .comments .comment .comment-avatar img{ width: 60px; float: left; border-radius: 50%; opacity: 1; -moz-transform: scale(1.0) !important; -webkit-transform: scale(1.0) !important; transform: scale(1.0) !important;} .journal .post-comment .comments .comment .comment-content{ width: calc(100% - 80px); float: left;} .journal .post-comment .comments .comment .comment-content h4{font-family:'SansationRegular', serif; font-size: 18px;} .journal .post-comment .comments .comment .comment-content p{opacity: 0.7;} .journal .post-comment .comments .comment .comment-content small{font-family: 'SansationRegular', sans-serif; text-transform: uppercase;} .journal .post-comment .comments .comment .comment-content a{ float: right; font-weight: 600; font-size: 12px; padding: 4px 8px; border: 1px solid #eee; color: #65656a;} .journal .post-comment textarea{ width: 100%;} .journal .post-comment .comment-form{ width: 100%; float: left; margin-top: 40px;} .journal .post-comment .comment-form label{width: 100%; float: left; margin: 0; position: relative; z-index: 2;} .journal .post-comment .comment-form label span{ float: left; background: #fff; font-size: 12px; margin-left: 14px; padding: 0 6px; font-weight: 600; margin-bottom: -10px;} .journal .post-comment .comment-form input{width: 100%; height: 62px; border: 1px solid #ccc; padding: 0 20px;} .journal .post-comment .comment-form textarea{width: 100%; height: 120px; border: 1px solid #ccc; padding:20px;} .journal .post-comment .comment-form button{height: 60px; line-height: 58px; display: inline-block; border:none; padding: 0 40px; font-size: 11px; border:none; font-weight: 700; color: #fff; background: #65656a; overflow: hidden;} .journal .container-fluid{padding: 0 30px;} /* CONTACT */ .contact{ width: 100%; float: left; padding-top: 120px; padding-bottom: 90px;} .contact .titles{ width: 100%; float: left; text-align: center; margin-bottom: 40px; padding: 0 25%;} .contact .titles h5{ font-size: 12px; font-weight: 700; text-transform: uppercase;} .contact .titles h2{ font-family: "Sansation"; font-size: 4em; margin-bottom: 30px;} .contact .address{ width: 100%; float: left; text-align: center; padding: 0 10%; margin-bottom: 50px;} .contact .address h4{ display: block; font-family: "Sansation"; font-size: 24px; line-height: 32px; margin-bottom: 20px; } .contact .address p{display: block;} .contact .address p a{font-weight: 600; color: #131314;} .contact .address a{display: inline-block; font-weight: 600; color: #131314;} .contact .address a:hover{text-decoration: none;} .contact .address a svg{ width: 20px; display: inline-block; margin-bottom: -8px; } .contact form{ margin-top: 50px;} .contact form .form-group{margin-bottom: 30px;} .contact form label{ width: 100%; float: left; margin: 0; position: relative; z-index: 2;} .contact form label span{float: left; background: #fff; font-size: 12px; margin-left: 14px; padding: 0 6px; font-weight: 600; margin-bottom: -10px;} .contact form input[type="text"]{ width: 100%; height: 62px; border: 1px solid #ccc; padding: 0 20px;} .contact form textarea{ width: 100%; height: 140px; float: left; line-height: 26px; border: 1px solid #ccc; padding: 20px;} .contact form button[type="submit"]{height: 60px; line-height: 58px; display: inline-block; border:none; padding: 0 40px; font-size: 11px; font-weight: 700; color: #fff; background: #131314; overflow: hidden;} .contact .alert{ width:100%; float:left;} .contact #success, .contact #error {display:none} .contact #success, .contact #error { float:left;} .contact #contact label.error{ width:100%; color:#1dcad3; margin-top: 10px; text-align: center;} .contact #contact input.error {width:100%; border:1px solid #1dcad3;} .contact #contact textarea.error{width:100%; border:1px solid #1dcad3;} .map{ width: 100%; height: 420px; background: #1dcad3;} /* FOOTER */ .footer-spacing{ width: 100%; float: left;} .footer{ width: calc(100%); left: 0; bottom: 0; padding-top: 10px; z-index: -1; text-align: center; color: #fff; } .footer #footer-bar { width: 100%; float: left; border-top:1px solid rgba(255,255,255,0.05); margin-top: 50px; padding: 20px 0;background:#65656a; } .footer #footer-bar span{font-size: 12px;} /* Footer Background */ .footer .container-fluid{width: calc(100% - 120px);} .footer .container-fluid img{width:50%; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); padding-bottom:10px;} .footer .container-fluid h4 {width: 50%;} .footer .container-fluid ul {list-style:none;} .footer .container-fluid ul li a{color:#65656a; text-align:right} .footer .container-fluid ul li a:hover{color:#fff; text-align:right} .footer .social-media{ width: 100%; float: left; text-align: center; margin-bottom: 20px; padding: 0;} .footer .social-media li{display: inline-block; margin: 0 10px; list-style: none;} .footer .social-media li a{ float: left; font-size: 12px; font-weight: 600; color: #fff;} .footer .social-media li a:hover{text-decoration: none; color: #40c2cc;} @-webkit-keyframes ani-mouse{0%{opacity:1;top:29%}15%{opacity:1;top:50%}50%{opacity:0;top:50%}100%{opacity:0;top:29%;background:#1dcad3;}} @-moz-keyframes ani-mouse{0%{opacity:1;top:29%}15%{opacity:1;top:50%}50%{opacity:0;top:50%}100%{opacity:0;top:29%;background:#1dcad3;}} @keyframes ani-mouse{0%{opacity:1;top:29%}15%{opacity:1;top:50%}50%{opacity:0;top:50%}100%{opacity:0;top:29%;background:#1dcad3;}} .scroll-btn{display:block;position:absolute;left:50%;bottom:5%;z-index:2;text-align:center} .scroll-btn>*{display:inline-block;line-height:18px;font-size:13px;font-weight:400;color:#fff;font-family:SansationBold;letter-spacing:2px} .scroll-btn>.active,.scroll-btn>:focus,.scroll-btn>:hover{color:#fff}.scroll-btn>.active,.scroll-btn>:active,.scroll-btn>:focus,.scroll-btn>:hover{opacity:.8;filter:alpha(opacity=80)} .scroll-btn .mouse{position:relative;z-index:2;display:block;width:20px;height:35px;margin:0 auto -5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:2.5px solid #fff;border-radius:23px} .scroll-btn .mouse>*{position:absolute;display:block;top:29%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;border-radius:50%;-webkit-animation:ani-mouse 2.5s linear infinite;-moz-animation:ani-mouse 2.5s linear infinite;animation:ani-mouse 2.5s linear infinite} .scroll-btn p {margin-left: 5%;} /* WAVE */ .wave{position:absolute;left:0;right:0;top:89.5%;z-index:-2} .wave+.wave{z-index:-3} .wave1{position:relative;left:0;right:0;top:0px;z-index:1} .wave2{position:relative;left:0;right:0;top:111px;z-index:1;transform:rotate(180deg); -ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);} /* SCROLL DOWN */ .scroll-down{width: 1px; height: 70px; position: absolute; left: 50%; bottom: 30px; z-index:2;} .scroll-down span {display: block; position: relative; padding-top: 79px; text-align:center;} .scroll-down span::before { -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite;} .scroll-down span::before{ position: absolute; top: 0px; left: 50%; margin-left: -0.5px; width: 1px; height: 70px; background: #fff; content:"";} /* RESPONSIVE LARGE MEDIUM FIXES */ @media only screen and (min-width: 1600px) { .preloader img{width:300px; height:300px} main {padding-bottom:14.5%} .branchs {background-position:center} .blog-section{padding-bottom:30px} .blog-link {min-height:299px} } @media only screen and (min-width: 1400px) { .blog-section{padding-top:0} .last-posts-grid {background:url(../lines.png); background-size:100%;padding-top:30px} } @media only screen and (max-width: 1199px), only screen and (max-device-width: 1199px) { .header{padding: 30px 60px;} .slider .swiper-container .swiper-slide .inner h2{font-size: 4em;} .slider .swiper-container .swiper-slide .inner{padding: 0 60px;} .side-image-content .inner .contenty h2{font-size: 2em; text-indent: 0;} .branchs h2{font-size: 3em; text-indent: 0;} .blog-section{padding-bottom:300px;z-index:2} } /* RESPONSIVE TABLET FIXES */ @media only screen and (max-width: 991px), only screen and (max-device-width: 991px) { .slider .swiper-container .swiper-slide .inner h2{max-width: 70%;} .slider .swiper-container .swiper-slide .inner p{max-width: 70%;} .slider .swiper-container .swiper-button-prev{ right: 160px;} .slider .swiper-container .swiper-button-line{right: 110px;} .slider .swiper-container .swiper-button-next{ right: 60px;} .side-image-content{display: block;} .side-image-content .inner{width: 100%; float: left; display: block;} .side-image-content .inner .contenty{padding: 100px 15%;} .contact form input[type="text"]{border-radius: 0 !important; box-shadow: none !important;} .contact form textarea{border-radius: 0 !important; box-shadow: none !important;} .blog-link {height:232px} } /* RESPONSIVE MOBILE FIXES */ @media only screen and (max-width: 767px), only screen and (max-device-width: 767px) { .header{padding: 30px;} .header .language{display: none;} .social-bar{display: none;} .slider .swiper-container .swiper-slide .inner{padding: 0 30px;} .slider .swiper-container .swiper-slide .inner h2{max-width: 100%; font-size: 3.5em;} .slider .swiper-container .swiper-slide .inner p{max-width: 100%;} .slider .swiper-container .swiper-button-prev{ display: none;} .slider .swiper-container .swiper-button-line{ display: none;} .slider .swiper-container .swiper-button-next{ display: none;} .slider .swiper-container .swiper-pagination-fraction{display: none;} .slider .scroll-btn{display:none;} .content{ width: calc(100% - 30px); margin: 0 15px;} .side-image-content{margin-bottom: 0;} .side-image-content .inner .contenty{ padding: 60px 30px; text-align: center;} .side-image-content .inner .contenty h5:before{display: none;} .side-image-content .inner .contenty h2{font-size: 3em;} .side-image-content .inner .contenty .award-list li span{float: none;} .side-image-content .inner .main-image{margin-bottom: 0;} .side-image-content .inner .sub-image{ width: 100%; float: left; position: static; margin: 0;} .branchs{text-align: center;} .branchs h5:before{display: none;} .footer{width: calc(100% - 30px); margin: 0 15px;} .footer .container-fulid h2{font-size: 3em; padding: 0;} .footer .container-fulid .social-media{display: block;} .footer .container-fulid .footer-bar span{ width: 100%; text-align: center;} } @media screen and (max-width:480px) { .preloader img{width:100px;height:100px;margin:0;left:38%} .preloader .text-rotater{left:1%} header .top-header .language{left:10%} header .navbar{ background-image:url(../header-mob.svg),url(../lines.png);background-size:100%,80%;background-position:left,right;background-repeat:no-repeat} header .navbar-brand{ width: 38%;} header img{ width: 100%;} header .navbar-toggler{position: relative; right: 85%; color: #fff;} header .navbar ul.navbar-nav{float:left} .slider {height:30vh} .slider .swiper-container .swiper-slide video{width:100%; z-index:5;background:#fff} .slider .swiper-container .swiper-slide:after{background-image:none} .slider .swiper-container .swiper-slide .inner{padding: 0 15px;} .slider .swiper-container .swiper-slide .inner h2{ font-size: 0.8em; } .slider .swiper-container .swiper-slide .inner p{ width:50%;font-size: 0.4em; line-height: 15px; margin-bottom: 10px;text-shadow: .5px .5px .5px #ccc;text-align:right} .slider .scroll-btn{display:none;} main {padding-bottom:37.5%} .side-image-content {background-image:url(../lines.png); background-repeat:repeat; background-size:50%} .side-image-content .contenty h4{font-size:1.3em} .side-image-content .inner.bg1 {border-bottom-left-radius:2%;border-top-right-radius:2%} .side-image-content canvas {display:none} .news {background:url(../lines.png);background-size: 100%;padding-bottom:0; width:100%} .circle-1,.circle-2,.circle-3,.circle-4,.circle-5,.circle-6,.circle-7,.circle-8 {display:none} .news .date .lp-more {bottom:15px;} .news .date .lp-date {left:15px} .news .date .lp-date:hover {left:0px} .lp-item:hover .lp-more{height:30px;line-height:50px} img.bot11 {top:0; width:100%; height:35px} .wave2{top:128px} .branchs.bgk2{ background-image:url(../lines.png),url(../bcimg-01.svg);background-repeat:repeat,no-repeat; background-size:100%,230%;background-position:center, bottom right} .branchs .swiper-slide{border-radius:50%; height:300px;} .branchs .grid figure{min-width:278px} .branchs .swiper-button-prev, .branchs .swiper-button-next{display:none} .blog-section{padding-bottom:36px;z-index:2;background:none;} .blog-section .float-left{float:none !important;} .blog-item {padding-bottom:15px;height:auto} .news .col-md-4 .rounded, .news .col-sm-4 .rounded, .news .col-lg-4 .rounded{overflow:visible} .news img.w-full:hover{transform:scale(1,1); } .last-posts-grid{ z-index:0;} .lp-item{width:100%!important} .footer {width:100%!important;margin:0px} .footer .container-fluid{width:100% !important; left:0} .footer .container-fluid .col-md-3{width:100% !important} .footer .wave {top: 86.5%;} .footer .mfix {position:absolute;background:#b289ef;padding: 50px;width: 100%;height: 300px;top: 94.60%;z-index: -1;} .footer #footer-bar{width: 100%;float: left;margin-top:10px;padding: 10px;} }