title/* FIXES */ *, html { margin:0; padding:0; } .clearfix:after, .jt_row:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix, .jt_row {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix, * html .jt_row {height: 1%;} .clearfix, .jt_row {display: block;} /* End hide from IE-mac */ /* END FIXES */ body, input, textarea { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } @font-face { font-family: BitterBold; src: url(https://www.angusbarn.com/fonts/Bitter-Bold.otf); } @font-face { font-family: BitterRegular; src: url(https://www.angusbarn.com/fonts/Bitter-Regular.otf)); } @font-face { font-family: BitterItalic; src: url(https://www.angusbarn.com/fonts/Bitter-Italic.otf); } @font-face { font-family: Raleway; src: url(/fonts/Raleway-Regular.ttf); } @font-face { font-family: RalewayBold; src: url(https://www.angusbarn.com/fonts/Raleway-Bold.ttf); } @font-face { font-family: RalewayThin; src: url(https://www.angusbarn.com/fonts/Raleway-Thin.ttf); } h3{font-family: 'Bitter', sans-serif;} .linkcolor {font-weight: bolder;} .eventbump{padding-top:105px;} .bottombump{padding-top:175px;} .bigbump {padding-top:75px; margin-top:55px} .memorybump {margin-top:0px} .pdf { color:#780002; font-size:large;} table.tableizer-table { font-size: 13px; border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif; } .tableizer-table td { padding: 4px; margin: 3px; border: 1px solid #CCC; } .tableizer-table th { background-color: #8B020B; color: #FFF; font-weight: bold; } .detail2{ display: block; color: #484745; font-size: 13px; font-family: 'Bitter', sans-serif; text-align: left;} .detailwhite{ display: block; text-transform: none; color: #FFFFFF; font-size: 12px; font-weight: 300; font-family: 'Bitter', sans-serif; } .menu{ font-family: 'Bitter', sans-serif;text-align: left; } .bar{ position: fixed; z-index: 100; bottom: 0; display:inline-block; left: 0; width: 100%; height:90px; color:#FCF9F9; background-color:#000000; opacity: 0.9; filter: alpha(opacity=90); font-family:'Raleway'; font-size:14px; font-weight:bold; padding-bottom:0px; padding-left: 30px; padding-right: 30px; text-align:center; line-height:21px; padding-top:20px; } .flex-row { display: flex; flex-wrap: wrap; /* Mandatory for children to move to the next line */ } .column { flex: 1; /* Equal width on desktop */ padding: 10px; } @media screen and (max-width: 768px) { .column { /* 0 (don't grow), 0 (don't shrink), 100% (initial width) */ flex: 0 0 100%; } } .bar2{ z-index: 9999; top: 0px; display:inline-block; left: 0; width: 100%; height:100px; color:#FCF9F9; background-color:#FF0000; filter: alpha(opacity=90); font-family:'Raleway'; font-size:14px; font-weight:bold; padding-bottom:0px; padding-left: 30px; padding-right: 30px; text-align:center; line-height:21px; padding-top:0px; } .barnew{ position: fixed; z-index: 100; bottom: 0; display:inline-block; left: 0; width: 100%; height:100px; color:#FCF9F9; background-color:#000000; opacity: 0.9; filter: alpha(opacity=90); font-family:'Raleway'; font-size:16px; padding-bottom:0px; text-align:center; line-height:18px; padding-top:10px; padding-left: 15px; } .jt_row .jt_row-fluid .row2 {padding-top:80px} .bar2{font-size:14px; vertical-align:center} .floater{ float:right; text-align:center; padding:0px; font-size: 12px; font-weight: 300; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; right: 30px; top: 120px; width:230px; opacity: 0.7; filter: alpha(opacity=70); border-style:ridge; border-width:0px; border-color:#FFFFFF; background-color:#000022; z-index:999999; } .floaterg{ float:right; text-align:right; padding:0px; font-size: 12px; font-weight: 300; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; right: 30px; top: 290px; width:230px; opacity: 0.7; filter: alpha(opacity=70); border-style:ridge; border-width:0px; border-color:#FFFFFF; z-index:999999; } .mbook{padding-top:55px} .mbook2{padding-top:55px} .rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; } ul.leaders { max-width: 40em; padding: 0; overflow-x: hidden; list-style: none} ul.leaders li:before { float: left; width: 0; white-space: nowrap; content: ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . " ". . . . . . . . . . . . . . . . . . . . "} ul.leaders span:first-child { padding-right: 0.33em; background: white} ul.leaders span + span { float: right; padding-left: 0.33em; background: white} .floater22{ float:right; text-align:right; padding:10px; font-size: 12px; font-weight: 300; font-family: 'Bitter', sans-serif; color:#FFFFFF; right: 30px; top: 75px; width:230px; background-color:#000000; border-style:ridge; border-width:8px; border-color:#FFFFFF; margin-left:25px } .rmargin{padding-right:30%;} .floater2{ float:right; text-align:right; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; right: 30px; top: 570px; width:230px; background-color:#000000; opacity: 0.7; filter: alpha(opacity=70); border-style:ridge; border-width:8px; border-color:#FFFFFF; } .floater3{ float:right; text-align:left; padding:10px; font-size: 12px; font-weight: 300; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; right: 20px; top: 300px; background-color:#000000; opacity: 0.7; filter: alpha(opacity=70); border-style:ridge; border-width:8px; border-color:#FFFFFF; } .floater40{ float:left; text-align:right; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; left: 15px; top: 100px; width:230px; z-index:9999; } .floater4{ float:left; text-align:left; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; left: 15px; top: 110px; width:220px; z-index:9999; } .floater4new{ float:left; text-align:left; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; left: 15px; top: 110px; width:220px; z-index:9999; } .floater4g{ float:left; text-align:left; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; left: 15px; top: 237px; width:220px; z-index:9999; } .floater5{ float:left; text-align:center; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; left: 15px; top: 400px; width:220px; z-index:9999; } .floater55{ float:left; text-align:left; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; left: 15px; top:625px; width:220px; z-index:9999; } .floater4t{ padding:10px; font-size: 1em; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: absolute; top: 80px; margin-left: 25%; margin-right: 25%; width:50%; } .floater44{ float:left; text-align:left; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; left: 15px; top: 620px; width:220px; z-index:9999; } .floater444{ float:left; text-align:left; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; left: 15px; top: 300px; width:220px; z-index:9999; } .career { float:left; text-align:center; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; left: 15px; top: 380px; width:220px; z-index:9999; } .floater446{ float:left; text-align:right; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; left: 15px; top: 620px; width:230px; z-index:9999; } .floater447{ float:left; text-align:left; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; left: 15px; top: 290px; width:220px; z-index:9999; } .floater449{ float:right; text-align:center; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; right: 25px; top: 110px; width:220px; z-index:9999; } .floater4499{ float:right; text-align:center; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; right: 25px; top: 300px; width:220px; z-index:9999; } .floater44999{ float:right; text-align:center; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; right: 25px; top: 430px; width:220px; z-index:9999; } .floater44qq{ float:right; text-align:center; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; right: 25px; top: 600px; width:220px; z-index:9999; } .floater44x{ float:right; text-align:right; padding:0px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; right: 25px; top: 320px; width:220px; z-index:9999; } .floater44y{ float:right; text-align:right; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; right: 25px; top: 425px; width:220px; z-index:9999; } .floater45{ float:left; text-align:right; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; left: 15px; top: 405px; width:230px; z-index:9999; } .floater46{ float:left; text-align:right; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; position: fixed; left: 15px; top: 550px; width:230px; z-index:9999; } .floaterc1{ float:left; position: relative; left: 50%; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; top: 150px; z-index:9999; margin: 0; } .floaterc2{ float:left; position: relative; left: -50%; padding:10px; font-size: 12px; font-weight: 400; font-family: 'Bitter', sans-serif; color:#FFFFFF; top: 150px; z-index:9999; margin: 0; } .floater5{ margin: auto; position: fixed; bottom: 20px; z-index:9999; } .rsrv{z-index:99999; padding-left:10px; margin: auto;} .gcard{display:none;} .hidehome{display:none;} .ecard{display: none;} .eimage{display:none;} .list5 {text-align:left; margin-left:25px; list-style-position: outside;} .title { font-family: 'Bitter', sans-serif; font-weight:400; font-size: 28px; color:#383733; padding-top:57px; margin-top:5px; margin: 0 auto; line-height: 47px; display: inline-block; text-transform: uppercase; padding-left:15px; } .titlef2 { font-family: 'Bitter', sans-serif; font-weight:400; font-size: 28px; color:#383733; padding-left:15px; margin-top:5px; margin: 0 auto; line-height: 47px; display: inline-block; text-transform: uppercase; } .titlef3 { font-family: 'Bitter', sans-serif; font-weight:400; font-size: 48px; color:#383733; padding-left:15px; margin-top:5px; margin: 0 auto; line-height: 47px; display: inline-block; text-transform: uppercase; } .title5 { font-family: 'Bitter', sans-serif; font-weight:400; font-size: 28px; color:#fff; border-top:5px solid #f9333f; padding-top:5px; margin-top:55px; margin: 0 auto; line-height: 47px; display: inline-block; text-transform: uppercase; } .title2 { font-family: 'Bitter', sans-serif; font-weight:400; font-size: 44px; color:#383733; margin-top:25px; padding-top:20px; padding-left:10px; padding-right:10px; line-height: 47px; display: inline-block; text-transform: uppercase; } .titlef22 { font-family: 'Bitter', sans-serif; font-weight:400; font-size: 48px; color:#383733; margin-top:100px; padding-top:50px; margin: 0 auto; line-height: 47px; display: inline-block; text-transform: uppercase; } .titlef23 { font-family: 'Bitter', sans-serif; font-weight:400; font-size: 48px; color:#383733; margin-top:100px; padding-top:40px; margin: 0 auto; line-height: 47px; display: inline-block; text-transform: uppercase; } .title4 { font-family: 'Bitter', sans-serif; font-weight:400; font-size: 30px; color:#fff; padding-top:57px; margin-top:5px; margin: 0 auto; line-height: 47px; display: inline-block; text-transform: uppercase; } .title3 { font-family: 'Bitter', sans-serif; font-weight:400; font-size: 24px; color:#383733; padding-top:15px; margin-top:5px; margin: 0 auto; line-height: 27px; display: inline-block; text-transform: lowercase; } .title33 { font-family: 'Bitter', sans-serif; font-weight:400; font-size: 30px; color:#383733; padding-top:15px; margin-top:5px; margin: 0 auto; line-height: 27px; display: inline-block; text-transform: UPPERCASE; } .image1{padding-right:25px; margin-top:15px} .text-center .title { border-top: 0px; padding-top: 0px; margin-bottom: 40px; padding-bottom: 40px; position: relative; } .text-center .title:after { content: " "; position: absolute; width: 70px; height: 3px; background: #f9333f; margin-left: -35px; bottom: 0px; left: 50%; } .title.invert { color:#fff; border-color:#282828; } .title.invert-2 {color:#fff;} .title.mini { border-top:0px; padding: 0px; font-size: 15px; text-transform: uppercase; font-family: 'Bitter', sans-serif; } .title.medium { font-family: 'Bitter', sans-serif; font-size: 25px; color:#fff; font-weight: 700; text-align: center; text-transform: uppercase; border-top:0px; padding-top:0px; margin-top: 0px; line-height: 23px; display: block; letter-spacing: 8px } a:hover {text-decoration: none;} .feature1 { border:solid #959595; border-radius: 3px; padding:10px; z-index:99999;} .feature2 { padding:10px;} /*dark version*/ .darker #header.overflow, .darker #footer {background:#343434 !important;} .darker #header.overflow .menu-item a {color:#fff !important;} .darker #header.overflow.fixed .navbar-brand.mini {display: none !important;} .darker #header.overflow.fixed .navbar-brand.mini.darker {display: block !important;} /*Loader*/ #mask { background-color: #000; height: 100%; position: fixed; width: 100%; z-index: 999999; } .loader { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; top: 50%; left: 50%; } /*Animations inview*/ .jt_row { opacity: 10; -webkit-transition: opacity 0.5s ease-in; -o-transition: opacity 0.5s ease-in; transition: opacity 0.5s ease-in; } #header .jt_row, .jt_row.visible {opacity: 1;} /* Header */ #header { position: absolute; top:50px; left: 0px; z-index:1001; width: 100%; font-family: 'Bitter'; } #header2 { position: absolute; top:50px; left: 0px; z-index:1001; width: 100%; font-family: 'Bitter'; } #header .container {width: 97%;} .navbar-collapse {padding-right:0px;} #header.overflow { top:-100px; left: 0px; background-color: #fff!important; box-shadow: 0 1px 3px rgba(0,0,0,0.11); -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-font-smoothing: antialiased; } #header2 .container {width: 97%;} .navbar-collapse {padding-right:0px;} #header2.overflow { top:-100px; left: 0px; background-color: #fff!important; box-shadow: 0 1px 3px rgba(0,0,0,0.11); -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -webkit-font-smoothing: antialiased; } #header.overflow .menu-item a { font-size: 14px; line-height: 21px; color: #818181; } #header2.overflow .menu-item a { font-size: 14px; line-height: 21px; color: #818181; } #header.overflow .navbar-nav > li {padding-bottom:13px;} #header2.overflow .navbar-nav2 > li {padding-bottom:13px;} #header.overflow.fixed { top:0px; position: fixed; z-index:99999; } #header.overflow.fixed .navbar-brand.normal {display: none;} #header.overflow.fixed .navbar-brand.mini { display: block; margin-top:-1px; } #header2.overflow.fixed { top:0px; position: fixed; z-index:99999; } #header.overflow.fixed { top:0px; position: fixed; z-index:99999; } #header2.overflow.fixed .navbar-brand.normal {display: none;} #header2.overflow.fixed .navbar-brand.mini { display: block; margin-top:-1px; } #header.overflow.fixed .navbar-brand.mini.darker {display: none;} #header2.overflow.fixed .navbar-brand.mini.darker {display: none;} #header .navbar-brand {padding:10px 20px;} #header2 .navbar-brand {padding:10px 20px;} .navbar-brand.mini { display: none; } .navbar-collapse.navbar-right.navbar-main-collapse.in, .navbar-collapse.navbar-right.navbar-main-collapse.collapsing { overflow: visible; } .navbar-main-collapse.in .navbar-nav, .navbar-main-collapse.collapsing .navbar-nav { position: absolute; background: #282828; background: rgba(40, 40, 40, 0.9); width: 90%; top: 100%; left: 5%; margin:0px; height: auto; } .navbar-main-collapse.in .navbar-nav2, .navbar-main-collapse.collapsing .navbar-nav2 { position: absolute; background: #282828; background: rgba(40, 40, 40, 0.9); width: 90%; top: 100%; left: 5%; margin:0px; height: auto; } .navbar-toggle { margin-top: 10px; height: 30px; width: 30px; border-radius: 0px; border: 0px; display: none; font-size: 36px; line-height: 24px; padding: 0px; color:#fff; } #header.overflow.fixed .navbar-toggle { color:#000; } #header2.overflow.fixed .navbar-toggle { color:#000; } #header .menu-item a { color:#fff; text-transform: none; font-size: 14px; font-family: 'Bitter'; line-height: 6px; letter-spacing: 1px; border-bottom:3px solid transparent; font-weight: 700; text-shadow: 0px 0px 1px transparent; } #header2 .menu-item a { color:#fff; text-transform: none; font-size: 14px; font-family: 'Raleway'; line-height: 6px; letter-spacing: 1px; border-bottom:3px solid transparent; font-weight: 700; text-shadow: 0px 0px 1px transparent; } #header .menu-item.current a, #header .menu-item a:hover { background-color: transparent; border-bottom-color:#f9333f; text-shadow: 0px 0px 1px transparent; } #header2 .menu-item.current a, #header .menu-item a:hover { background-color: transparent; border-bottom-color:#f9333f; text-shadow: 0px 0px 1px transparent; } #header .jt_row {padding-top:0px;} #header2 .jt_row {padding-top:0px;} /*DIFFERENTS HOMES*/ .fixed-height { position:relative; height: 600px !important; } .fixed-height .logointro, .fixed-height .mouse {display: none;} .fixed-height .slide-content {height: 275px !important;} .fixed-height .overlay {height: 600px !important;} .fixed-height #owl-main img {width: 100% !important;} .fixed-height #owl-main .owl-pagination {display: block !important;} .fixed-height #owl-main .owl-buttons {display: none !important;} #home-slider.static { background-size: cover !important; background-attachment: fixed !important; background-position: center center !important; } .slider-parallax .mouse {display: none;} .slider-parallax #owl-main .owl-pagination {display: block !important;} .slider-parallax #owl-main .owl-buttons {display: none !important;} .slider-parallax #home-slider { position: fixed; z-index: 0; top: 0px; left: 0px; width: 100%; } .slider-parallax .section { position: relative; } /* Top wrap */ .owl-carousel .owl-item {text-align: center;} .overlay { background: url(../images/overlay.png); opacity: 0.4; position: absolute; left: 0; top: 0; right: 0; z-index: 999; width: 100%; height: 100%; } .overlay.op50 {opacity: 0.0;} .slider-wrap { background: #000; position: relative; } #owl-main .owl-item {overflow: hidden;} #owl-main img { position: absolute; max-width: none; top: 0; } @media screen and (max-width: 1400px){ .para {width:60%; margin-top:50px;}} #owl-main .owl-prev { float: left; margin-left: 15px; position: relative; opacity: 0.1; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; z-index:9999; } #owl-main .owl-next { float: right; margin-right: 18px; position: relative; opacity: 0.1; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; z-index:9999; } #owl-main .owl-pagination { display: none; width: 100%; overflow: hidden; position: relative; top:-70px; z-index: 9999; } #owl-main .owl-controls .owl-page span { width: 16px; height: 16px; border-radius: 50%; background: transparent; margin:0px 6px; border:1px solid #fff; } #owl-main .owl-controls .owl-page.active span, #owl-main .owl-controls.clickable .owl-page:hover span { background: #f9333f; border-color:#f9333f; } #owl-main .owl-prev:hover,#owl-main .owl-next:hover { opacity: 1; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } #owl-main .owl-buttons { height: 43px; position: absolute; left: 0; right: 0; top: 0; bottom: 65px; margin: auto; z-index: 9999; } .slide-content { z-index: 1000; position: absolute; left: 0; right: 0; top: 0; display: table-cell; vertical-align: top; height: 530px; margin: auto; bottom: 10px; text-align: center; } .slide-content .slide-icon {margin-top:54px;} .bump{margin-top:0px;} .bump2{margin-top:140px;} .logointro img { display: table; margin: 0 auto; } .mouse2{font-size:18px ; color:#FFF; font-weight:400; font-family: 'Raleway'; padding-left:10px; padding-right:10px} .mouse { display: block; width: 90%; background-color:#000000; opacity:0.6; filter: alpha(opacity=60); border-radius: 0px; border: 0px solid #fff; position: fixed; bottom:60px; left: 5%; right: 2%; margin-left: -10px; z-index: 99999; } .mouse span { display: block; margin: 5px auto; width: 90%; border-radius: 0px; font-size: medium ; font-weight:400; font-family: 'Bitter', serif; color:#FFffff; border: 0px solid transparent; -webkit-animation-duration: 0s; animation-duration: 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-iteration-count: 0; animation-iteration-count: 0; -webkit-animation-name: scroll; animation-name: scroll; } @-webkit-keyframes scroll { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } } @keyframes scroll { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } #owl-main-text { height: 182px; margin-bottom: 0px; margin-top:0px; } #owl-main-text h2 { font-size: 55px; text-align: center; color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: 10px; margin-top: 0; margin-bottom:7px; font-family: 'raleway'; } .slide-content p { font-size: 18px;font-style: italic; color: #fff; text-align: center; font-weight: 300; font-family: 'Bitter'; position: relative; bottom:40px; left: 0px; width: 100%; } #owl-main-text .item { padding-bottom:75%; position: relative; } .slide-sep { display: block; width: 70px; height: 3px; background:#f9333f; margin:-100px auto; content: " "; } .section2{margin-bottom:25px; background: #fff; overflow: hidden;} /*Sections*/ .voffset10 { margin-top: 10px; } .voffset20 { margin-top: 20px; } .voffset30 { margin-top: 30px; } .voffset40 { margin-top: 40px; } .voffset50 { margin-top: 50px; } .voffset60 { margin-top: 60px; } .voffset70 { margin-top: 70px; } .voffset80 { margin-top: 80px; } .voffset90 { margin-top: 90px; } .voffset100 { margin-top: 100px; } .voffset150 { margin-top: 150px; } .voffset200 { margin-top: 200px; } .section { margin-bottom:-100px; background: #fff; } .section#footer {overflow: visible;} .section .full-width { padding-top:0px; width: 100%; } .section .full-width .row { margin-left:0px; margin-right: 0px; } .section .full-width .jt_col, .container.full-width { padding-left: 0px; padding-right: 0px; } .section .jt_row {padding-bottom:100px;} .section2 .jt_row {padding-bottom:10px;} .section .jt_row.overlap {padding-bottom:0px;} .subtitle2 { font-family: 'Bitter'; margin-top: 5px; font-size: 14px; line-height: 20px; color:#444; font-weight: 400; text-transform: uppercase; font-style: normal; } .text-center .title { border-top: 0px; padding-top: 0px; margin-bottom: 40px; padding-bottom: 40px; position: relative; } .text-center .title:after { content: " "; position: absolute; width: 70px; height: 3px; background: #f9333f; margin-left: -35px; bottom: 0px; left: 50%; } .title.invert { color:#fff; border-color:#282828; } .title.invert-2 {color:#fff;} .title.mini { border-top:0px; padding: 0px; font-size: 15px; text-transform: uppercase; font-family: 'Bitter'; } .title.medium { font-family: 'Bitter'; font-size: 25px; color:#fff; font-weight: 700; text-align: center; text-transform: uppercase; border-top:0px; padding-top:0px; margin-top: 0px; line-height: 23px; display: block; letter-spacing: 8px } .subtitle.mini { font-family: 'Bitter'; margin-top: 5px; font-size: 12px; line-height: 18px; color:#888; font-weight: 400; font-style: normal; padding-left:15px; padding-right:15px; } .subtitle.mini.darker {color:#333;} .player.section .subtitle.mini {color:#fff;} .YTPOverlay.raster {background: none !important;} .player .overlay {z-index: 0;} .section .subtitle.strong { font-family: 'Bitter'; font-weight: 700; font-style: normal; font-size: 29px; margin:5px auto; } .section .text { font-family: 'Raleway'; font-size: 17px; color:#444444; line-height: 40px; font-weight: 300; padding-left:8px; padding-right:8px; } .section .text.invert {color:#fff;} .section .text.presentation { font-family: 'Raleway'; font-size: 17px; line-height: 33px; font-weight: 300; padding-left:15px; padding-right:15px; } .presentation2 { font-family: 'Raleway'; font-size: 19px; line-height: 52px; margin-right:100px; font-weight: 300; padding-left:15px; padding-right:15px; } .section .text.presentation span { padding-bottom:10px; border-bottom:0px solid #e1e1e1; } .section .text { font-weight: 300; } .text2 { font-weight: 300; margin-right:120px; } .section.separator { text-align: center; padding-top:0px; margin-bottom:-20px; overflow: visible; padding-bottom:0px; } .section.separator a {color:inherit;} .section.separator .jt_row {padding-bottom:20px;} .section.parallax {padding-bottom:40px;} .section.player { margin-bottom:0px; position: relative; height: 860px; } .section .go-btn { margin:0px auto; text-align: center; } .section .button { border:1px solid #7d0004; color:#fff; font-family: 'Bitter'; font-weight: 300; font-size: 18px; display: inline-block; padding:15px 25px 15px 25px; border-radius:5px; margin-left:15px; margin-right:15px; margin-top:15px; margin-bottom:15px; } .section .button2 { border:1px solid #7d0004; color:#fff; font-family: 'Bitter'; font-weight: 300; font-size: 18px; display: inline-block; padding:15px 25px 15px 25px; border-radius:5px; margin-left:15px; margin-right:15px; margin-top:15px; margin-bottom:15px; } .section .button.inverse {border-color: #f9333f;} .section .button.playstop { border-color:#f9333f; padding: 12px 38px 12px 38px; } .section .button.next { background: url('../images/rarrow.png') right center no-repeat; } .section .button:hover { border-color: #f9333f;} .section .button.inverse:hover { border-color: #888;} .section .ball { display: inline-block; border-radius: 50%; } .section .text-center .ball {margin-bottom:20px;} /* About */ .carousel-wrapper.imac-table { background: url('../images/bg-slider-table.jpg') center top no-repeat; height: 602px; padding:29px 0px; width: 1310px; width: 1310px; position: relative; left: 50%; margin-left: -655px; top: 0px; margin-top:-18px; } .carousel-wrapper.imac-table .owl-pagination {display: none;} .carousel-wrapper.imac-table .owl-buttons { position: relative; display: block; } .carousel-wrapper.imac-table .owl-controls .owl-buttons .owl-prev { position: absolute; left: -103px; top: -170px; background: url('../images/btn-carousel-prev.png') no-repeat; width: 32px; height: 59px; text-indent: -99999px; } .carousel-wrapper.imac-table .owl-controls .owl-buttons .owl-next { position: absolute; right:-103px; top:-170px; width: 32px; height: 59px; text-indent: -99999px; } .carousel-wrapper.imac-table .owl-controls .owl-buttons div:hover {opacity: 0.5;} .carousel-wrapper.imac-table .generic-carousel { width: 495px; height: 279px; margin:0px auto; padding-left:12px; overflow: visible; } .carousel-wrapper.imac-table .generic-carousel .owl-item .item img { width: 100%; height: 279px; } .megabutton { display: block; width: 100%; padding-top: 30px; padding-bottom: 20px; text-align: center; background: #FF0000; clear:both; } .megabutton * { display: block; margin:0px auto; } .megabutton:hover {background:#209991; } /* Carousel */ .carousel-wrapper .owl-pagination, .carousel-wrapper .owl-buttons {display: none;} .carousel-wrapper.full { width: 100%; } .carousel-wrapper.full .generic-carousel .owl-item .item img { width: 100%; height: auto; } .carousel-wrapper .generic-carousel .owl-item .item.video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border: 0; } .carousel-wrapper .generic-carousel .owl-item .item.video iframe { top: 0; left: 0; width: 100%; height: 100%; } .carousel-wrapper.full .owl-pagination {display: none;} .carousel-wrapper.with_buttons .owl-buttons {display: block;} .carousel-wrapper.with_buttons .owl-controls .owl-buttons div { position: absolute; left: -68px; top: 50%; background: url('../images/btn-generic-prev.png') #f9333f no-repeat; width: 68px; height: 99px; text-indent: -99999px; z-index:9999; border-radius: 0px; margin: -30px 0px 0px 0px; -webkit-transition: left 0.1s ease-in, right 0.1s ease-in; -o-transition: left 0.1s ease-in, right 0.1s ease-in; transition: left 0.1s ease-in, right 0.1s ease-in; } .carousel-wrapper.with_buttons .owl-controls .owl-buttons div.owl-next { right:-68px; left: auto; background: url('../images/btn-generic-next.png') #f9333f no-repeat; } .carousel-wrapper.with_buttons.contrast .owl-controls .owl-buttons div {background: url('../images/btn-generic-prev2.png') #2d2d2d no-repeat !important;} .carousel-wrapper.with_buttons.contrast .owl-controls .owl-buttons div.owl-next {background: url('../images/btn-generic-next2.png') #2d2d2d no-repeat !important;} .carousel-wrapper.with_buttons:hover .owl-controls .owl-buttons div.owl-prev {left:0px;} .carousel-wrapper.with_buttons:hover .owl-controls .owl-buttons div.owl-next {right:0px;} .carousel-wrapper.with_buttons .owl-controls .owl-buttons div:hover, .carousel-wrapper.with_buttons.contrast .owl-controls .owl-buttons div.owl-next:hover {background-position: 0px -99px !important;} .carousel-wrapper.with_pagination .owl-pagination { display: block; width: 100%; overflow: hidden; z-index: 9999; position: relative; } .carousel-wrapper.with_pagination.round_inner .owl-pagination { opacity: 0; -webkit-transition: opacity 0.3s ease-in; -o-transition: opacity 0.3s ease-in; transition: opacity 0.3s ease-in; } .carousel-wrapper.with_pagination.round_inner:hover .owl-pagination {opacity: 1;} .carousel-wrapper.with_pagination.round_inner .owl-theme .owl-controls { margin-top: -50px; padding-bottom: 29px; } .carousel-wrapper.with_pagination.round_inner .owl-theme .owl-controls .owl-page span { width: 16px; height: 16px; border-radius: 50%; background: transparent; margin: 0px 6px; border: 1px solid #fff; } .carousel-wrapper.with_pagination.round_inner .owl-theme .owl-controls .owl-page.active span { background: #f9333f; border-color:#f9333f; } .project-slide.carousel-wrapper.with_pagination .owl-pagination {margin-top:15px;} .carousel-wrapper.with_pagination .owl-theme .owl-controls .owl-page span { border-radius: 0px; width: 25px; height: 5px; background: #dfe0e1; margin:0px 2px; } .carousel-wrapper.with_pagination .owl-controls .owl-page.active span, .carousel-wrapper.with_pagination .owl-controls.clickable .owl-page:hover span { background: #f9333f; } .testimonials.carousel-wrapper.with_pagination .owl-theme .owl-controls .owl-page span {background: #94262d; } .testimonials.carousel-wrapper.with_pagination .owl-controls .owl-page.active span, .testimonials.carousel-wrapper.with_pagination .owl-controls.clickable .owl-page:hover span {background:#ffffff;} .carousel-wrapper.with_pagination #owl-story .owl-pagination {margin-bottom:130px;} .carousel-wrapper.with_pagination #owl-services .owl-pagination {margin-bottom:130px;} .carousel-wrapper.full .generic-carousel .owl-item .ulitem {margin-bottom:49px;} .carousel-wrapper.full .generic-carousel .owl-item .ulitem li { width:33%; float: left; list-style: none; font-size: 15px; font-weight: 300; font-family: 'raleway'; color:#8a8d94; margin-bottom:40px; padding-right:3%; text-align: left; } .carousel-wrapper.full .generic-carousel .owl-item .ulitem li h3 { font-family:'Bitter'; font-size: 20px; color:#444444; font-weight: 400; margin:10px 0px; } .carousel-wrapper.full .generic-carousel .owl-item .ulitem li .icon { border-radius: 50%; display: block; float: left; width: 56px; height: 56px; background: #f9333f; margin:0px 25px 10px 0px; line-height: 56px; font-size: 25px; color: #fff; text-align: center; } .service-text { margin-left: 81px; line-height: 26px; } .separator { text-align: center; width: 100%; } .separator img { max-width: 100%; height: auto; } /*Featured projects*/ .carousel-wrapper.full .generic-carousel .owl-item .project img { width: 100%; height: auto; } .project2 { position: absolute; top: 12%; left: 24%; padding-right: 20%; padding-left: 0%;} .carousel-wrapper.full .generic-carousel .owl-item .project .featured-info { position: absolute; top: 0%; left: 20%; padding-left: 0%; margin-bottom:0px; } /*Team members*/ .team-wrapper { margin-top:100px; } .team-wrapper .team-member { width: 25%; float: left; padding:0px 2%; margin:30px 0px; position: relative; text-align: center; background: url('../images/gradient_team.jpg') repeat-x; background-size:contain; overflow: hidden; } .team-wrapper .team-member img { max-width: 100%; height: auto; } .team-wrapper .team-member .hover { position: absolute; background: #fff; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; } .team-wrapper .team-member:hover .hover {opacity: 1;} .team-wrapper .team-member:hover .main {opacity: 0;} .team-wrapper .team-member .hover .hover-border { height: 0px; width: 100%; position: absolute; border-bottom: 5px solid #f9333f; bottom:0px; left: 0px; z-index:999; } .team-wrapper .team-member .hover .blur { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding:0px 8%; z-index:99; text-align: center; } .team-wrapper .team-member .hover .blur-hover { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index:98; background: rgba(255,255,255,0.8); } .team-wrapper .team-member .hover .name { position: absolute; width: 100%; left: 0px; bottom:90px; color:#f9333f; font-size: 35px; font-weight: 300; z-index: 101; font-family: 'Raleway'; } .team-wrapper .team-member .hover .position { position: absolute; width: 100%; left: 0px; bottom:65px; font-family: 'Raleway'; font-size: 17px; color:#212020; font-weight: 300; text-transform: lowercase; z-index: 101; font-style: italic; } .team-wrapper .team-member .hover .social { position: absolute; width: 100%; left: 0px; bottom:30px; z-index: 101; } .team-wrapper .team-member .hover .social .icon { width: 24px; height: 24px; display: inline-block; margin:0px 5px; background: url('../images/icons-team.png') 0px 0px no-repeat; text-indent: -99999px; } .team-wrapper .team-member .hover .social .icon.tw {background-position: center 0px;} .team-wrapper .team-member .hover .social .icon.di {background-position: right 0px;} .team-wrapper .team-member .hover .social .icon.fb:hover {background-position: 0px -24px;} .team-wrapper .team-member .hover .social .icon.tw:hover {background-position: center -24px;} .team-wrapper .team-member .hover .social .icon.di:hover {background-position: right -24px;} .pag-more { display: block; width: 100%; height: 83px; line-height: 80px; text-align: center; font-family: 'Raleway'; font-style: italic; color:#f9f9f9; background: #151515 url('../images/view-more.png') no-repeat center center; font-size:18px; text-indent: -99999px; margin-top:0px; } .pag-more:hover {background-color:#1b1b1b;} .pag-more.team { position: relative; top:-30px; margin-bottom:-30px; } .pag-more:hover { color:#f9f9f9; } /*Portfolio*/ #ajax .container {position: relative;} a.close.top { position: absolute; bottom: 0px; margin:0px auto; background: url('../images/close-project.png') no-repeat; display: block; text-indent: -99999px; width: 38px; height: 38px; z-index: 9999; } .folio-item { padding: 0 0px 0px 0; width: 33.3334%; } .portfolio-grid { margin-top: 50px; } .portfolio-thumb { position: relative; overflow: hidden; } .no-padding { padding: 0 !important; } .portfolio-dark-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; background: #fa505b; opacity: 0; visibility: hidden; } .portfolio-inner { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; opacity: 0; font-family: 'Raleway'; } .portfolio-thumb:hover .portfolio-inner { opacity: 1; } .portfolio-thumb:hover .portfolio-dark-overlay { opacity: 1; visibility: visible; } .portfolio-inner h4 { font-size: 30px; text-align: center; color: #fff; margin: 0; font-weight: 300; letter-spacing: 2px; } .portfolio-inner .zoom { width: 55px; height: 53px; background: url(../images/zoom.png); display: table; margin: 0 auto 20px; } .portfolio-inner-ctr { display: table-cell; margin: auto; vertical-align: middle; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 116px; } .project-single {margin-bottom: 100px;} .project-info { color:#444444; font-size: 16px; font-family: 'Raleway'; font-weight: 300; padding-top:100px; padding-bottom:0px; margin-bottom: -90px; } .project-info .btn2 { display: block; width: 100%; text-align: left; color:#f9333f; margin-top: 80px; } .project-info p {margin-bottom:15px;} .project-info h6 { font-family: 'Raleway'; font-weight: 400; font-size: 12px; text-transform: uppercase; color:#717171; margin-bottom:10px; text-align: center; opacity: 0.75; } .project-info h4 { font-family: 'Raleway';text-transform: uppercase; font-weight: 800; color:#444444; text-align: center; font-size:30px; margin-bottom:70px; position: relative; } .project-info h4:after { content:''; position: absolute; width: 94px; height: 2px; background:#f9333f; position: absolute; bottom:-25px; left: 50%; margin-left:-47px; } /*Clients*/ .clients-list {margin-top:80px;} .clients-list li { width: 25%; padding:20px 2% 20px 0px; float: left; list-style: none; text-align: center; position: relative; min-height: 188px; } .clients-list a { display: block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; color: #333; } .clients-list a:hover {opacity: 0.3;} .clients-list img { max-width: 58%; } /*Testimonials*/ .testimonials.carousel-wrapper { padding:50px 0% 10px 0%; font-family: 'Raleway'; font-size: 18px; line-height: 38px; color:#ffffff; font-weight: 300; text-align: center; background:url('../images/quotes.png') left top no-repeat; width: 100%; max-width: 1040px; margin:-100px auto 0px auto; } .testimonials.carousel-wrapper.with_buttons .owl-controls .owl-buttons div, .testimonials.carousel-wrapper.with_buttons:hover .owl-controls .owl-buttons div.owl-prev { left: 50%; margin-left: -200px; background-color: transparent !important; } .testimonials.carousel-wrapper.with_buttons .owl-controls .owl-buttons div.owl-next { right: 50%; left: auto; margin-right: -200px; margin-left: 0px; background-color: transparent !important; } .testimonials.carousel-wrapper .item { width: 100%; max-width: 780px; margin:0px auto; } .client-photo {margin-top: 50px;} .item .author { display: block; margin:30px 0px 20px 0px; font-size: 16px; } /*Our reel*/ .mb_YTVPBar {display: none !important;} .video-img { position: absolute; left: 50%; top: 50%; margin-left:-172px; margin-top:-107px; } /*Contact and map*/ .formSent { margin: 10px; text-align: center; padding: 0 0px; color: #fff; display: none; } label.error {display: none !important;} .contact-form .error {border-color:red !important;} #contact.section .jt_row.overlap { width: 480px; margin:0px 0px 0px 22%; } div#wpgmappitymap.wpgmappity_container.inner-map {background:#282828 !important;} #maps { width: 100%; height: 1080px; position: absolute; overflow: hidden; } .inner-map { width: 100%; height: 1080px; margin-left: auto; margin-right: auto; } #maps2{ width: 100%; height: 500px; position: absolute; overflow: hidden; } .inner-map2 { width: 100%; height: 500px; margin-left: auto; margin-right: auto; } .map-content2 { width: 100%; margin-left: auto; margin-right: auto; } .Flexible-container { position: relative; padding-bottom: 56.25%; padding-top: 40px; height: 0; overflow: hidden; } .Flexible-container iframe, .Flexible-container object, .Flexible-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .address-title { width: 100%; font-size: 24px; font-weight: 300; color:#fff; width: 198px; text-align: left; margin-bottom:15px; margin-top:80px; font-family: 'Raleway'; } .address { font-size: 15px; font-weight: 300; color: #fff; font-style: bold; width: 198px; text-align: justify; } .contact-form {margin-top:50px;} .contact-form .col { width: 45%; float: left; } .contact-form .col.col2 { float: right; margin-right: 2%; margin-bottom:20px; } .contact-form .text { width: 100%; max-width: 470px; margin-bottom:33px; border:1px solid #fff; border-radius: 4px; color:#fff; font-size: 18px; height: 47px; line-height: 47px; background:transparent; padding:0px 15px 0px 0px; text-indent: 64px; font-family: 'Raleway'; } .contact-form .text.name {background:url('../images/contact-name.png') 20px center no-repeat transparent;} .contact-form .text.email {background:url('../images/contact-email.png') 20px center no-repeat transparent;} .contact-form .text.area { height: 140px; line-height: 23px; text-indent: 0px; padding:17px 20px; } .contact-form .submit { background: transparent; color:#fff; border-color:#f9333f; float: right; margin-bottom:75px; padding-left:35px; height: 57px; line-height: 57px; padding-top:0px; margin-right:10px; font-size: 22px; } .modal-form .contact-form .submit:hover {border-color:#f9333f;} .contact-form ::-webkit-input-placeholder { color:#fff;} .contact-form :-moz-placeholder { color:#fff; opacity: 1;} .contact-form ::-moz-placeholder { color:#fff; opacity: 1;} .contact-form :-ms-input-placeholder { color:#fff;} .modal-form { background:url('../images/worldmapform.jpg') no-repeat; padding:130px 165px; position: fixed; border-radius: 50%; top: 50%; left: 50%; width: 800px; height: 800px; z-index: 999999; visibility: hidden; backface-visibility: hidden; -webkit-transform:translateX(-50%) translateY(-50%) ; -ms-transform: translateX(-50%) translateY(-50%); -o-transform:translateX(-50%) translateY(-50%) ; transform:translateX(-50%) translateY(-50%) ; } .modal-form span { display: block; text-align: center; color:#3b9f99; } .modal-form .subtitle {color:#fff;} .modal-form span.subtitle.strong { color:#fff; margin-top:10px; font-weight: bold; font-family: 'Bitter'; font-size: 35px; font-style: normal; } .modal-form .contact-form .submit { margin-bottom:0px; border-width: 1px; border-style: solid; color: #fff; font-family: 'Bitter '; font-weight: 300; font-size: 24px; padding: 0px 38px 20px 38px; border-radius: 5px; display: block; float: none; margin:0px auto; } .modal-form .contact-form .text {width: 100%;font-weight: 300;} .modal-form .contact-form {margin-top:50px;} .modal-form .contact-form .text.name {background:url('../images/contact-name-gray.png') 20px center no-repeat transparent;} .modal-form .contact-form .text.email {background:url('../images/contact-email-gray.png') 20px center no-repeat transparent;} .md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 99999; opacity: 0; background: rgba(0,0,0,0.8); transition: all 0.3s; } .md-overlay.show, .modal-form.show {opacity:1;visibility: visible;} /*FOOTER*/ #footer { background:#fff; text-align: center; font-size: 14px; color:#606060; padding-bottom:10px; position: relative; background: #3D3C38; } #footer2 { background:#fff; text-align: center; font-size: 14px; color:#606060; padding-bottom:0px; position: relative; background: #3D3C38; } #footer .scrollup { width: 69px; height: 54px; background:url('../images/scrollup.png') no-repeat; position: absolute; top:-124px; left: 50%; margin-left:-27px; text-indent: -9999999px; } #footer2 .scrollup { width: 69px; height: 54px; background:url('../images/scrollup.png') no-repeat; position: absolute; top:-124px; left: 50%; margin-left:-27px; text-indent: -9999999px; } #footer .scrollup:hover {background-position: 0px bottom;} .single #footer .scrollup, #footer .scrollup.home {display: none;} #footer2 .scrollup:hover {background-position: 0px bottom;} .single #footer .scrollup, #footer .scrollup.home {display: none;} #footer .thanks { width: 350px; font-family: 'Raleway'; text-transform: uppercase; height: 350px; padding:100px 100px 100px 100px; border-radius: 50%; background:url('../images/like.png') center 40% no-repeat #f4405b; color:#fff; font-weight: 300; margin:0px auto 60px auto; } #footer .thanks a {color:#fff;} #footer .social-title { font-weight: 300; text-transform: uppercase; margin-bottom:50px; font-family: 'Raleway'; } #footer .social-title2 { font-weight: 400; font-style: italic; margin-bottom:30px; font-family: 'Raleway'; } #footer .social li { display: inline; margin:0px 20px; list-style: none; } #footer2 .social li { display: inline; margin:0px 10px; list-style: none; } #footer .social li .icon { display: inline-block; width: 64px; height: 64px; text-align: center; font-size: 30px; color:#E5E5E5; } #footer2 .social li .icon { display: inline-block; width: 64px; height: 64px; text-align: center; font-size: 30px; color:#E5E5E5; } #footer .social li .icon:hover {color:#000;} #footer2 .social li .icon:hover {color:#000;} .team-wrapper .team-member .hover .social .icon.pi {background-position: center 0px;} .team-wrapper .team-member .hover .social .icon.in {background-position: center 0px;} .team-wrapper .team-member .hover .social .icon.tw {background-position: center 0px;} .team-wrapper .team-member .hover .social .icon.yt {background-position: right 0px;} .team-wrapper .team-member .hover .social .icon.fb:hover {background-position: 0px -24px;} .team-wrapper .team-member .hover .social .icon.tw:hover {background-position: center -24px;} .team-wrapper .team-member .hover .social .icon.di:hover {background-position: right -24px;} .float-right {float:right !important;} .float-left {float:left !important;} .float-none {float:none !important;} .text-right {text-align: right;} .text-center {text-align: center;} .text-left {text-align:left;} /*IDs for inlines styles in WP*/ #start-a-project {background: #43a9a3;} #our-studio {background: #282828} #our-studio-presentation {padding-left:280px;text-align:right; width: auto;} #our-story .carousel-wrapper.with_buttons .owl-controls .owl-buttons div {top:183px;} #our-story {background: url('../demo/our-story/bg-our-story.png') #c7323b top center no-repeat;} /*#services {background: url('../demo/services/bg-services.jpg') #ffffff center bottom no-repeat;}*/ #clients .separator {margin-top:-140px;} #testimonials {background: url('../demo/testimonials/bg-testimonials.png') #c7323b top center repeat;} #contact {background: #282828} #city {margin-bottom:140px; background: url('../demo/city/parallax-city.jpg'); background-size:auto 1060px;} #overlay-photo { margin-bottom:-210px; margin-top:-100px; } .features-icon { float: left; width: 20%; margin-right: 5%; margin-top:-45px; } .features { list-style: none; float: left; color:#fff; font-size: 14px; text-align: left; font-family: 'Raleway'; line-height:28px; margin-top:-10px; } .features li .icon { float: left; width: 80px; height: 80px; line-height: 80px; text-align: center; border: 1px solid #eee; border-radius: 50%; margin-right: 20px; background: rgba(255,255,255,0.1); font-size: 32px; } .features li {margin-bottom:40px;} .features .wrap {margin-left: 100px;} .features h3 { font-size: 27px; font-family: 'Raleway'; font-weight: 400; margin-bottom:15px; } .eventup {height:725px;} .eventup0 {height:800px;} .eventup2 {height:520px;} .eventup3 {height:430px;} .eventup4 {height:200px;} .eventup1 {height:600px;} .padtop{padding-top:85px;} .padtop2{padding-top:115px;} .fontup { font-size:33px} /* RESPONSIVE */ @media only screen and (max-width: 1900px) { .logointro img {margin-top:50px;} #our-studio-presentation { padding-left: 0px; width: 50%; text-align: center; } .fontup { font-size:24px} #our-studio-presentation .voffset200 {margin-top:140px;} #our-studio-presentation .voffset100 {margin-top:50px;} .carousel-wrapper.full .generic-carousel .owl-item .project .featured-info { width: 50%; text-align: left; padding-right:0px; } .tp2 { margin-right:230px;} } @media only screen and (max-width: 1500px) { .voffset10 { margin-top: 7px; } .voffset20 { margin-top: 20px; } .voffset30 { margin-top: 25px; } .voffset40 { margin-top: 40px; } .voffset50 { margin-top: 45px; } .voffset60 { margin-top: 50px; } .voffset70 { margin-top: 55px; } .voffset80 { margin-top: 60px; } .voffset90 { margin-top: 65px; } .voffset100 { margin-top: 70px; } .voffset150 { margin-top: 105px; } .voffset200 { margin-top: 140px; } .item{ width:75%;} .padtop{padding-top:85px;} #header .menu-item a, #header.overflow .menu-item a { font-size: 1.1em;} } /* Note: Design for a width of 1366px */ @media only screen and (max-width: 1366) { #header .menu-item a, #header.overflow .menu-item a { font-size: 1em;} } /* Note: Design for a width of 1024px */ @media only screen and (max-width: 1280px) { .container {width: 100%;} .section .full-width {width: 100%;} .voffset10 { margin-top: 5px; } .voffset20 { margin-top: 10px; } .voffset30 { margin-top: 15px; } .voffset40 { margin-top: 20px; } .voffset50 { margin-top: 25px; } .voffset60 { margin-top: 30px; } .voffset70 { margin-top: 35px; } .voffset80 { margin-top: 40px; } .voffset90 { margin-top: 45px; } .voffset100 { margin-top: 50px; } .voffset150 { margin-top: 75px; } .voffset200 { margin-top: 100px; } #owl-main-text {margin-top:75px;} .section.player {display: none;} #contact.section .jt_row.overlap { width: auto; margin: 0px 11% 0px 11%; } .jt_row {opacity: 1;} .mouse2{font-size: smaller ;} .social img{max-width:100%;} .text { margin-right:0px;} .folio-filter2 li { margin-left:15px;} .feature1{margin-left:15px;} .tp2 { margin-right:275;} .pdf { margin-left:15px} #header .menu-item a, #header.overflow .menu-item a { font-size: .75em;} } /* Note: Design for a width of 768px */ @media only screen and (max-width: 1024px) { #header {top:20px;} .logointro img {width: 210px} .floater{display:none; } .t00{display:none; } .floater4 {display:none; }.bar2{display:none; } .floater4g {display:none; } .floater5 {display:none; } .floater55 {display:none; } .floater44 {display:none; } .floater44x {display:none; } .floater444 {display:none; } .floater445 {display:none; } .floater447 {display:none; } .floater449 {display:none; } .floater4499 {display:none; } .floater44999 {display:none; } .floater44y {display:none; } #jp {display:none; } .tp2 { margin-right:0px;} #header .menu-item a, #header.overflow .menu-item a { font-size: 0.75em;} #owl-main .owl-prev, #owl-main .owl-next {display: none;} .modal-form { width: 600px; height: 600px; padding:40px 90px; } #header .container {width: 100%;} .navbar-brand img .item { max-width: 100%; margin-top:0px; } .navbar-brand.mini img {margin-top:3px;} .navbar-nav > li {padding: 15px 6px 15px 5px;} .navbar-nav2 > li {padding: 15px 2px 15px 2px;} #header .menu-item a, #header.overflow .menu-item a { font-size: 0.65em; line-height: 18px; padding-bottom:14px; } .section .full-width {width: 100%;} .voffset10, .voffset20, .voffset30, .voffset40, .voffset50, .voffset60, .voffset70, .voffset80, .voffset90, .voffset100, .voffset150 {margin-top:45px;} .voffset200 { margin-top: 60px; } .section .button {font-size:18px;} .section .title { font-size: 30px; line-height: 37px; padding-top: 70px; margin-bottom: 10px; } .section .title.mini { font-size: 15px; line-height: 17px; padding:0px; } .carousel-wrapper.full .generic-carousel .owl-item .ulitem li { padding-left:3%; width: 50%; } img { max-width: 100%; height: auto; } .clients-list li { width: 33%; min-height: 207px; } .address-title { margin-top:15px; width: 100%; text-align: left; } .address { width: 100%; font-size: 15px; } #owl-main-text h2 {font-size: 35px;} .slide-content p { font-size: 18px; margin: 60px 0px; bottom:75px; } .section .full-width .jt_col, .container.full-width { text-align: center !important; padding:0px !important; } .features { line-height: 25px; } .features h3 {font-size: 18px;} .features li { margin-top:0px; margin-bottom: 28px; font-size: 12px; } .featured-info{width:100%;} .features {margin-bottom:50px;} .portfolio-inner h4 {font-size: 15px;} .portfolio-inner-ctr {height: 100px;} #maps {position: relative;} .contact-form .text.area { max-width: 100%; } #footer .scrollup {top:-75px;} .carousel-wrapper.full .generic-carousel .owl-item .project .featured-info { top: 20px; left: 0%; width: 100%; } .contact-form .col.col2 {margin-right: 0px;} .overlay {display: none;} #owl-main-text {height: 130px;} .slide-sep {margin-top:-200px;} .section .text.presentation { font-size: 16px; line-height: 23px; margin:auto; } .div .text{ margin:auto; text-align:center;} #our-studio-presentation { width: 50%; margin: 0px auto; } .parallax {background-size: cover !important;} .section .jt_row {padding-bottom:10px;} .container {padding-top:20px;} .section {margin-bottom:-100px;} #maps, .inner-map {height: 701px;} .contact-form .text {font-size: 17px;} .jt_row.container { padding-left:0px; padding-right: 0px; } .col-md-3 .title { margin-left: 30px; } .megabutton { padding-top: 30px; padding-bottom: 20px; } .folio-filter li a {margin-right: 8px;} .folio-filter2 li a {margin-right: 8px; } .section .title.medium {font-size:26px;} .folio-filter li { margin:7px 0px; } .folio-filter2 li { margin:7px 0px; } .team-wrapper .team-member .hover .name {font-size: 22px;} .section .text.presentation span { border-bottom:0px ; } .title2{float: none; text-align: center; } .floater40{display:none;} .floater45{display:none;} .gcard{display: block;} .ecard {display: block;} .folio-filter2{margin-left:15px;} } @media only screen and (max-width : 990px) { .section {text-align: center;} .float-right {float:none !important;} .col-md-3 .title { margin-left: 0px; } .features { width: 335px; float: none; margin: -20px auto 50px auto; } .folio-filter2 li {display: block; margin: 0 100px;} .folio-item { width: 100%; } .feature1{margin-left:8px; margin-right:8px} .mbook{padding-top:0px} .mbook2{padding-top:45px} .fontup {font-size:24px} } /* Note: Design for a width of 768px */ @media only screen and (max-width : 768px) { .team-wrapper .team-member .hover .blur {padding:0px;} .navbar-header {float: none;} .features li { margin-top:0px; margin-bottom: 35px; font-size: 14px; } .fontup { font-size:16px} .features h3 { font-size: 20px; line-height: 26px; margin-bottom: 10px; margin-top: 5px; } .eimage{display:none;} .ecard{width:230px; margin-left:0px; margin-right:0px} .navbar-nav { height: 0px; overflow: hidden; } .navbar-nav2 { height: 0px; overflow: hidden;} .navbar-toggle {display: block; right:10%;} .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {margin:0px;} .megabutton { margin-bottom:-10px; } .section {text-align: center;} .float-right {float:none !important;} .features .item { margin: 50px auto; width: 56%; float: none; } .col-md-3 .title { margin-left: 0px; } .jt_col {margin-bottom:20px;} .pag-more.team {margin-bottom:-110px;} .section .jt_row {padding-bottom:60px;} .container {padding-top:60px;} .section {margin-bottom:-60px;} .section.separator {margin-bottom:-100px;} .carousel-wrapper.full .generic-carousel .owl-item .project .featured-info {top:-10px;} .carousel-wrapper.with_pagination #owl-services .owl-pagination {margin-bottom:0px;} .carousel-wrapper.full .generic-carousel .owl-item .ulitem li {min-height: 160px;} .team-wrapper .team-member {width: 50%;} .team-wrapper {margin-top:0px;} .folio-filter.container {padding-top:0px;} .folio-filter2.container {padding-top:0px;} .text {font-size: 13px;} .clients-list {margin-top:0px;} .section .title.medium {font-size:20px;} .separator {margin-bottom:-80px;} #contact .jt_col {margin-bottom:0px;} .testimonials.carousel-wrapper .item {font-size:16px;} .contact-form .submit {margin-bottom:60px;} .section .text {margin-top:-35px;} #footer .social li .icon { display: inline-block; width: 34px; height: 34px; text-align: center; font-size: 40px; color:#E5E5E5; } .bump{margin-top:50px;} .bump2{margin-top:100px;} .gcard{display: block;} .hidehome{display: block;} .ecard{display: block;} .floater4{ display:none; } .floater44{display:none;} #header .menu-item a, #header.overflow .menu-item a { font-size: 9px; line-height: 13px; padding-bottom:13px; font-weight:bolder; color:#FAF8F8; } .fontup {font-size:14px} .padtop2{padding-top:10px;} h2 {text-align:left; line-height:18px; } .bigbump {padding-top:10px; margin-top:10px} .bottombump{padding-top:5px;} h2 .titlef23 {text-align:center} ul { padding-left:15px; padding-right:15px} .bar{font-size:14px} } /* Note: Design for a width of 320px */ @media only screen and (max-width : 568px) { body { overflow-x: hidden !important; } .container { max-width: 100% !important; overflow-x: hidden !important; } h3 {font-size:18px; line-height:21px;} .socright{margin-right:30px;} .title5 {line-height:21px} .eventbump {padding-top:20px;} .bump2 {margin-top: 75px} .text2 { font-size:14px; font-weight: 300; margin-right:0px; line-height:36px; } .mouse2{font-size: 12px ;} .eventup {height:10px;}.eventup1 {height:10px;} .eventup0 {height:10px;} .eventup2 {display:none;} .eventup3 {display:none;} .eventup4 {height:0px;} .padtop2{padding-top:15px;} .list5 {text-align:left; margin-left:5px; list-style-position: inside; font-size:14px; line-height:21px} #header {top:15px;} .bar{display: none;} .padtop {padding-top:5px !important; margin-top:5px !important;} #owl-main .owl-pagination { top:-55px; } #owl-main .owl-item {padding-top:0 !important} .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {margin:0px;} .navbar-collapse { height: 0px; border:0px; box-shadow:none; } .navbar-brand.normal img { width: 65%; margin-left: 10px; margin-top: 5px; } .jt_col {margin-bottom:30px;} .section .jt_row {padding-bottom:50px;} .container {padding-top:20px;} .section {margin-bottom:-50px;} .section.separator.child {margin-top:-100px;} .section .text.presentation { font-size: 17px; line-height: 27px; margin-top:40px; } .section .text.presentation span { padding-bottom:12px; } .carousel-wrapper.with_pagination #owl-services .owl-pagination {margin-bottom:60px;} .section .button { font-size: 13px; padding:10px 10px 10px 10px; } .section .button.next {background-position: 100% center;} .section .button.next { background:none; } .title {font-size: 29px;} .text {font-size: 13px;} .section .subtitle.mini {font-size: 13px; padding:10px} .section .subtitle {font-size: 21px;} .section .title.mini {font-size: 16px;} .container {width: 95%;} .section .full-width {width: 100%;} #maps {position: relative;} .carousel-wrapper.full .generic-carousel .owl-item .ulitem li, .clients-list li {width: 100%;} #owl-main-text h2 {font-size: 20px;} .slide-content p {font-size: 14px;} #owl-main-text {height: 120px;} .carousel-wrapper.imac-table { display: none; } .section .go-btn { margin: 20px auto -25px auto; } .carousel-wrapper.full .generic-carousel .owl-item .project img {height: auto;} #services {background-image:none;} .jt_col .separator img {margin-bottom:-30px;} .team-wrapper {margin-top:-30px;} .team-wrapper .team-member {width: 50%;} .team-wrapper .team-member .hover .blur { padding:0px; } .carousel-wrapper.full .generic-carousel .owl-item .project .featured-info { width: 100%; position: relative; top:0px; left: 0px; margin-top:0px; margin-bottom:0px; background: #000; padding:1px 0px 30px 0px !important; } .project-info h4 {font-size:27px;} .features { float: none; width: 100%; margin-bottom: 100px; margin-top:60px; } .features li { font-size: 12px; margin-bottom:20px; line-height: 20px; } .features h3 {font-size: 13px;} .folio-filter li {display: block;} .folio-filter2 li {display: block; margin: 0px;} .folio-item { width: 100%; } a.next-project {top:20px;} .address {margin-bottom:10px;} .address-title {margin-top:10px;} .testimonials.carousel-wrapper {background-size: contain;} .section .title.medium { margin-top:0px; font-size: 18px; margin-bottom:50px; } #maps, .inner-map {height: 350px;} .contact-form .col {width: 100%;} .contact-form .submit.button.next { width: 100%; margin: 0px 0px 30px 0px; background-image:none; line-height: 100%; text-align: center; padding: 0px; font-size: 17px; } #footer .thanks { width: 150px; height: 150px; padding: 100px 50px 50px 50px; text-indent: -999999px; background-position: center center; } #footer {padding-bottom:80px;} #footer .social li {margin: 0px;} .modal-form { border-radius: 0px; width: 100%; padding:20px; height: auto; } .logointro img { display: table; margin: 0px auto 0px auto; width: 40%; } .slide-content p {margin-top:0px;} .corner {display: none !important;} .slide-sep { margin-top:-180px; width: 35px; } .mouse { width: 70%; height: 30px; margin-left: 8px; bottom:10px; } .section .text.presentation { font-family: 'Raleway'; font-size: 15px; line-height: 28px; text-align: justify; padding-left:15px; padding-right:15px; } .bar { } .section .text {margin-top:0px;} .navbar-brand.mini img {margin-top:5px;} .modal-form .title, .modal-form .subtitle {display: none;} .modal-form {padding:0px 20px;} .megabutton .title.mini { font-size: 10px; margin-bottom: 5px; } .megabutton .subtitle {font-size: 18px;} .megabutton .subtitle.strong {font-size: 18px;} .section .megabutton .go-btn {margin-top:5px;} .megabutton { padding-top:20px; padding-bottom:95px; margin-bottom:-10px; } .carousel-wrapper.with_buttons .owl-controls .owl-buttons div { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); margin-top:-50px; } .carousel-wrapper.with_buttons:hover .owl-controls .owl-buttons div.owl-prev {left: -17px;} .carousel-wrapper.with_buttons:hover .owl-controls .owl-buttons div.owl-next {right: -17px;} .section .separator {margin-bottom: 0px;} #footer .scrollup {display: none;} #footer .social li .icon {margin:0px 5px;} #footer .social {margin:0px -40px;} .subtitle.mini.darker {color:#888;} #our-story .carousel-wrapper.with_buttons .owl-controls .owl-buttons div {top:50%;} .team-wrapper .team-member .hover .name {font-size: 16px;} .team-wrapper .team-member .hover .position {font-size: 12px;} .carousel-wrapper.full .generic-carousel .owl-item .ulitem li h3 {margin-top:0px;} .title2 { font-family: 'Bitter', sans-serif; font-weight:400; font-size: 33px; color:#383733; padding-top:10px; margin-top:10px; padding-left:15px; padding-right:15px; margin: 0 auto; line-height: 37px; text-transform: uppercase; } .item {transform:scale(0.6); } .titlef22 { font-size:24px} .text .presentation {text-align:center !important } .owl-carousel .owl-item {margin-bottom:0px; padding-bottom:0px; margin-top:25px} #home-slider {height:470px !important; margin-top:-100px} .title5{font-size:21px} .address-title {font-size:16px; text-decoration:underline } .voffset60 { margin-top: 20px; } .col-md-12 jt_col column_container{ margin-top:20px;} .image1{padding-right:5px; padding-left:5px; margin-top:5px;} .slide-content { height:300px;} .galactus{display: none;} .fontup {font-size:18px} .bump2{margin-top:0px;} .titlef23 { font-family: 'Bitter', sans-serif; font-weight:400; font-size: 36px; color:#383733; margin-top:20px; padding-top:0px; margin: 0 auto; line-height: 47px; display: inline-block; text-transform: uppercase; padding-left:15px; } .detail {font-size:10px} .title { font-size: 18px; padding-top:27px; margin-top:0px; margin: 0 auto; line-height: 29px; padding-left:0px; text-align: left; } }/*and (orientation : landscape) */ @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape){ #header.overflow.fixed, #header {z-index:99999; position: absolute;} #owl-main .owl-pagination {top: -25px;} .memorybump {margin-top:80px} #owl-main-text { height: 90px; margin-top:40px; } .mouse {display: none;} .logointro img { margin-top:150px; width:20%; } .slide-sep {width: 35px;} #owl-main .owl-controls .owl-page span { width: 14px; height: 14px; margin-top:2px; } .carousel-wrapper.with_pagination #owl-services .owl-pagination {margin-top:-50px;} .team-wrapper .team-member {width: 50%; } .folio-filter li {margin-bottom:10px;} .folio-filter2 li {margin-bottom:0px;} #footer {padding-bottom:40px;} .carousel-wrapper.full .generic-carousel .owl-item .ulitem li {min-height: 0px;} .voffset10, .voffset20, .voffset30, .voffset40, .voffset50, .voffset60, .voffset70, .voffset80, .voffset90, .voffset100, .voffset150 {margin-top:25px;} .features li {margin-bottom: 12px;} .features h3 {margin-bottom:5px;} } @media only screen and (max-height : 650px) { .logointro img { height: 150px; margin-top: 100px; width: auto; } #owl-main-text {margin-top:80px;} } /*------------------------------------------------------------- THEME SWITCHER --------------------------------------------------------------- */ #customizer { position: fixed; top: 64px; z-index: 999999; } .corner { display: block; cursor: pointer; width: 50px; height: 50px; background: url(../demo/corner.png); position: absolute; top: 50px; left: -50px; } .s-close { right: -205px !important; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .s-open { right: 0 !important; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .corner.expanded { background: url(../demo/corner.png); } #options { width: 205px; height: 378px; background: #fff; padding: 0; position: relative; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .heading { padding-bottom: 15px; margin-bottom: 20px; } #options h6 { color: #5c5c5c; margin-bottom: 10px; font-size: 13px; } .options-segment { margin-bottom: 20px; } .customize-button { display: inline-block; margin: 0; font-size: 12px; color: #5c5c5c !important; background: #f7f7f7; border: 1px solid #e9e9e9; padding: 3px 7px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .color-head { font-size: 13px; text-align: center; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; color: #525252; line-height: 40px; background-position: 92.5% 50%; margin-bottom: 15px !important; text-transform: uppercase; font-weight: 800; } .fonts-head { font-family: Bitter; font-size: 16px; color: #525252; line-height: 23px; margin-bottom: 15px !important; } .customize-button:hover { background: #fff; } .customize-button:first-of-type { margin-right: 5px; } .color-scheme { padding: 0; } .color-scheme li { float: left; list-style: none; } .color-scheme a { display: block; height: 30px; width: 30px; margin: 0 4.25px 10px; } .fonts-sel { padding: 20px 25px; margin-bottom: 0; } .colors-sel { padding: 20px 25px 15px; margin-bottom: 0; } .headers-sel { padding: 15px; margin-bottom: 0; } .green a { background: #65a94e; } .orange a { background: #e5ad51; } .blue a { background: #2fa1e0; } .red a { background: #f9333f; } .violet a { background: #7369b9; } .turquoise a { background: #34c5ba; } .yellow a { background: #ead22d; } .fblack a { background: #000000; } .ocre a {background: #e7cc35;} .version { padding: 0; margin-bottom: -20px; display: table; width: 100%; } .version li { list-style: none; width: 44%; margin-right: 9%; float: left; } .version li a { padding: 21px; display: table; } .version li:last-child { margin-right: 0; } .lite,.lite:hover { background: #f3f3f3; color: #7f7f7f; text-transform: uppercase; font-size: 12px; text-align: center; font-weight: 700; cursor: pointer; } .dark,.dark:hover { background: #7f7f7f; color: #fff; text-transform: uppercase; font-size: 12px; text-align: center; font-weight: 700; cursor: pointer; } .options-head { background: #fd6b6b; color: #fff; text-align: center; text-transform: uppercase; font-size: 15px; font-weight: 700; line-height: 50px; } /*Loader effect*/ .ip-header { position: fixed; top: 0; z-index: 999999; min-height: 480px; width: 100%; height: 100%; background: #111; } .ip-header h1 { margin: 0; } .ip-logo, .ip-loader { position: absolute; left: 0; width: 100%; opacity: 0; cursor: default; pointer-events: none; } .ip-logo { text-align: center; top: 0; height: 100%; -webkit-transform: translate3d(0,25%,0); transform: translate3d(0,25%,0); } .ip-loader { bottom: 20%; } .ip-header .ip-inner { display: block; margin: 0 auto; } .ip-header .ip-loader svg path { fill: none; stroke-width: 6; } .ip-header .ip-loader svg path.ip-loader-circlebg { stroke: #ddd; } .ip-header .ip-loader svg path.ip-loader-circle { -webkit-transition: stroke-dashoffset 0.2s; transition: stroke-dashoffset 0.2s; stroke: #ef6e7e; } /* Animations */ /* Initial animation of header elements */ .loading .ip-logo, .loading .ip-loader { opacity: 1; -webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; } .loading .ip-loader { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes animInitialHeader { from { opacity: 0; -webkit-transform: translate3d(0,800px,0); } } @keyframes animInitialHeader { from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); } } /* Header elements when loading finishes */ .loaded .ip-logo, .loaded .ip-loader { opacity: 1; } .loaded .ip-logo { -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards; animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes animLoadedLogo { to { opacity: 0; -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); } } @keyframes animLoadedLogo { to { opacity: 0; -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); } } .loaded .ip-loader { -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes animLoadedLoader { to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } } @keyframes animLoadedLoader { to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } } /* Change the color of the logo */ .loaded .ip-logo svg path { -webkit-transition: all 0.5s ease 0.3s; transition: all 0.5s ease 0.3s; fill: #fff; } /* Header animation when loading finishes */ .loaded .ip-header { -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes animLoadedHeader { to { -webkit-transform: translate3d(0,-100%,0); } } @keyframes animLoadedHeader { to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } } /* Content animations */ .loaded .ip-main h2, .loaded .ip-main .browser, .loaded .ip-main .browser .box, .loaded .codrops-demos { -webkit-animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both; animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both; } .loaded .ip-main .browser, .loaded .ip-main .browser .box:first-child { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; } .loaded .ip-main .browser .box:nth-child(2) { -webkit-animation-delay: 0.15s; animation-delay: 0.15s; } .loaded .ip-main .browser .box:nth-child(3) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes animLoadedContent { from { opacity: 0; -webkit-transform: translate3d(0,200px,0); } } @keyframes animLoadedContent { from { opacity: 0; -webkit-transform: translate3d(0,200px,0); transform: translate3d(0,200px,0); } } /* Change layout class for header */ .layout-switch .ip-header { position: absolute; } /* No JS */ .no-js .ip-header { position: relative; min-height: 0px; } .no-js .ip-header .ip-logo { margin-top: 20px; height: 180px; opacity: 1; -webkit-transform: none; transform: none; } .no-js .ip-header .ip-logo svg path { fill: #fff; } /* Media queries */ @media screen and (max-width: 45em) { .ip-main h2 { font-size: 2.25em; font-size: 10vw; } .box { width: 100%; } }