/* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Content ================================================== #Reset & Basics #Basic Styles #Site Styles #Typography #Links #Lists #Images #Buttons #Forms #Misc */ /* #Reset & Basics (Inspired by E. Meyers) ================================================== */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, select{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* #Basic Styles ================================================== */ body { background: #f2f2f2; font-family: 'Lato', sans-serif; font-weight: 300; font-size: 15px; line-height: 22px; color: #003333; overflow-x: hidden; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ /*text-shadow: 1px 1px 1px rgba(0,0,0,0.004);*/ -webkit-text-size-adjust: 100%; } html { overflow-x:hidden; height:100%; } /* #Typography ================================================== */ h1, h2, h3, h4, h5, h6 { color: #66cc33; font-family: 'GarnataRegular'; text-align: center; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; } h1 { font-size: 50px; line-height:50px; } h2 { font-size: 42px; line-height:42px;} h3 { font-size: 38px; line-height: 38px;} h4 { font-size: 34px; line-height: 34px;} h5 { font-size: 28px; line-height: 28px;color:#0099cc;} h6 { font-size: 22px; line-height: 22px;} p { } p img { margin: 0; } p.lead { font-size: 21px; line-height: 27px; color: #777; } em { font-style: italic; } strong { font-weight: 600;} small { font-size: 80%; } /* Blockquotes */ blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; } blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; } blockquote cite { display: block; font-size: 12px; color: #555; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } hr { border: solid #323a3d; border-width: 1px 0 0; clear: both; margin:0 10px 0 10px; height: 0; position:relative;} /* #Links ================================================== */ a, a:visited { text-decoration: none; } a:hover, a:focus { color: #66cc33;} p a, p a:visited { line-height: inherit; text-decoration: none;} a:focus{ outline:none; } /* #Lists ================================================== */ ul, ol { } ul { list-style: none outside; } ol { list-style: decimal; } ol, ul.square, ul.circle, ul.disc { margin-left: 30px; } ul.square { list-style: square outside; } ul.circle { list-style: circle outside; } ul.disc { list-style: disc outside; } ul ul, ul ol, ol ol, ol ul { font-size: 90%; } ul ul li, ul ol li, ol ol li, ol ul li { } li { line-height: 26px; } ul.large li { line-height: 21px; } li p { line-height: 21px; } /* #Buttons ================================================== */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] { background:#363636; margin-top:10px; border:none; color: #dfdfdf; display: inline-block; font-size: 16px; cursor: pointer; line-height: normal; padding: 15px 25px; -webkit-transition : all 0.3s ease-out; -moz-transition : all 0.3s ease-out; -o-transition :all 0.3s ease-out; transition : all 0.3s ease-out; width:100%} .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { color: #e74c3c; background:#292929; } .button:active, button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active { color: #e74c3c;} .button.full-width, button.full-width, input[type="submit"].full-width, input[type="reset"].full-width, input[type="button"].full-width { width: 100%; padding-left: 0 !important; padding-right: 0 !important; text-align: center; } /* Fix for odd Mozilla border & padding issues */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* #Images ================================================== */ /* #Misc ================================================== */ .remove-bottom { margin-bottom: 0 !important; } .half-bottom { margin-bottom: 10px !important; } .add-bottom { margin-bottom: 20px !important; } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } ::selection { background: rgba(102,204,51,.8); /* Safari */ } ::-moz-selection { background: rgba(102,204,51,.8); /* Firefox */ } /* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Contents ================================================== #Base 960 Grid #Tablet (Portrait) #Mobile (Portrait) #Mobile (Landscape) #Clearing */ /* #Base 960 Grid ================================================== */ .container { position: relative; width: 960px; margin: 0 auto; padding: 0; } .container .column, .container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;} .row { margin-bottom: 20px; } /* Nested Column Classes */ .column.alpha, .columns.alpha { margin-left: 0; } .column.omega, .columns.omega { margin-right: 0; } /* Base Grid */ .container .one.column, .container .one.columns { width: 40px; } .container .two.columns { width: 100px; } .container .three.columns { width: 160px; } .container .four.columns { width: 220px; } .container .five.columns { width: 280px; } .container .six.columns { width: 340px; } .container .seven.columns { width: 400px; } .container .eight.columns { width: 460px; } .container .nine.columns { width: 520px; } .container .ten.columns { width: 580px; } .container .eleven.columns { width: 640px; } .container .twelve.columns { width: 700px; } .container .thirteen.columns { width: 760px; } .container .fourteen.columns { width: 820px; } .container .fifteen.columns { width: 880px; } .container .sixteen.columns { width: 940px; } .container .one-third.column { width: 300px; } .container .two-thirds.column { width: 620px; } /* Offsets */ .container .offset-by-one { padding-left: 60px; } .container .offset-by-two { padding-left: 120px; } .container .offset-by-three { padding-left: 180px; } .container .offset-by-four { padding-left: 240px; } .container .offset-by-five { padding-left: 300px; } .container .offset-by-six { padding-left: 360px; } .container .offset-by-seven { padding-left: 420px; } .container .offset-by-eight { padding-left: 480px; } .container .offset-by-nine { padding-left: 540px; } .container .offset-by-ten { padding-left: 600px; } .container .offset-by-eleven { padding-left: 660px; } .container .offset-by-twelve { padding-left: 720px; } .container .offset-by-thirteen { padding-left: 780px; } .container .offset-by-fourteen { padding-left: 840px; } .container .offset-by-fifteen { padding-left: 900px; } /* #Tablet (Portrait) ================================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 768px; } .container .column, .container .columns { margin-left: 10px; margin-right: 10px; margin-top: 10px; margin-bottom: 10px;} .column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; } .column.omega, .columns.omega { margin-right: 0; margin-left: 10px; } .alpha.omega { margin-left: 0; margin-right: 0; } .container .one.column, .container .one.columns { width: 28px; } .container .two.columns { width: 76px; } .container .three.columns { width: 124px; } .container .four.columns { width: 172px; } .container .five.columns { width: 220px; } .container .six.columns { width: 268px; } .container .seven.columns { width: 316px; } .container .eight.columns { width: 364px; } .container .nine.columns { width: 412px; } .container .ten.columns { width: 460px; } .container .eleven.columns { width: 508px; } .container .twelve.columns { width: 556px; } .container .thirteen.columns { width: 604px; } .container .fourteen.columns { width: 652px; } .container .fifteen.columns { width: 700px; } .container .sixteen.columns { width: 748px; } .container .one-third.column { width: 236px; } .container .two-thirds.column { width: 492px; } /* Offsets */ .container .offset-by-one { padding-left: 48px; } .container .offset-by-two { padding-left: 96px; } .container .offset-by-three { padding-left: 144px; } .container .offset-by-four { padding-left: 192px; } .container .offset-by-five { padding-left: 240px; } .container .offset-by-six { padding-left: 288px; } .container .offset-by-seven { padding-left: 336px; } .container .offset-by-eight { padding-left: 384px; } .container .offset-by-nine { padding-left: 432px; } .container .offset-by-ten { padding-left: 480px; } .container .offset-by-eleven { padding-left: 528px; } .container .offset-by-twelve { padding-left: 576px; } .container .offset-by-thirteen { padding-left: 624px; } .container .offset-by-fourteen { padding-left: 672px; } .container .offset-by-fifteen { padding-left: 720px; } } /* #Mobile (Portrait) ================================================== */ @media only screen and (min-width: 319px) and (max-width: 767px) { .container { width: 420px; } .container .columns, .container .column { margin-left: 0; margin-right: 0; margin-top: 10px; margin-bottom: 10px;} .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 420px; } /* Offsets */ .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { padding-left: 0; } } /* #Mobile (Landscape) ================================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 319px) { .container { width: 220px; } .container .columns, .container .column { margin-left: 0; margin-right: 0; margin-top: 10px; margin-bottom: 10px;} .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 220px; } } /* #Mobile ================================================== */ @media only screen and (min-width: 320px) and (max-width: 479px) { .container { width: 300px; } .container .columns, .container .column { margin-left: 0; margin-right: 0; margin-top: 10px; margin-bottom: 10px;} .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column { width: 300px; } } /* #Clearing ================================================== */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } .row, .clearfix { zoom: 1; } /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800); @import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic); @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); @import url(http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic); @import url(http://fonts.googleapis.com/css?family=Satisfy); @import url("colors/color-gold.css"); /* #Navigation ================================================== */ #menu-wrap{ position: fixed; padding-bottom:10px; width:100%; z-index:500; top:0; left:0; } .menu-back{ background:rgba(250,250,250,0); } .cbp-af-header.cbp-af-header-shrink { background:rgba(250,250,250,1); -webkit-transition : all 0.5s ease-out; -moz-transition : all 0.5s ease-out; -o-transition :all 0.5s ease-out; transition : all 0.5s ease-out; } .cbp-af-header { background: rgba(250,250,250,.7); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .cbp-af-header.cbp-af-header-shrink .logo{ width:116px; height:70px; background:url('../images/logo1.png') no-repeat center center; background-size:contain; -webkit-transition : all 0.5s ease-out; -moz-transition : all 0.5s ease-out; -o-transition :all 0.5s ease-out; transition : all 0.5s ease-out; } .cbp-af-header.cbp-af-header-shrink ul.slimmenu { margin-top:1px; margin-bottom:0; -webkit-transition : all 0.5s ease-out; -moz-transition : all 0.5s ease-out; -o-transition :all 0.5s ease-out; transition : all 0.5s ease-out; } .cbp-af-header.cbp-af-header-shrink ul.slimmenu li:first-child { background:none; } .cbp-af-header.cbp-af-header-shrink ul.slimmenu li ul li:first-child { background:none; } .cbp-af-header.cbp-af-header-shrink ul.slimmenu li a { color: #003333; } ul.slimmenu li ul li a { color: #000; } ul.slimmenu li ul li a:hover { } ul.slimmenu li ul li { background:none; padding-left:0; } ul.slimmenu li ul { background:rgba(250,250,250,.95); box-shadow: 0 0 15px rgba(0,0,0,0.1); } .logo{ position:absolute; width:146px; height:90px; z-index:10000; left:10px; top:10px; background:url('../images/logo.png') no-repeat center center; background-size:contain; -webkit-transition : all 0.5s ease-out; -moz-transition : all 0.5s ease-out; -o-transition :all 0.5s ease-out; transition : all 0.5s ease-out; } .menu-collapser { position: relative; width: 100%; height: 48px; line-height: 48px; font-size: 16px; padding: 0 8px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box } .collapse-button { position: absolute; right: 8px; top: 50%; width: 40px; background-image: linear-gradient(to bottom, #151515, #040404); background-repeat: repeat-x; border-style: solid; border-width: 1px; color: #000; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075); padding: 7px 10px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); cursor: pointer; font-size: 14px; text-align: center; transform: translate(0, -50%); -o-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box } .collapse-button:hover, .collapse-button:focus { background-image: none; background-color: #040404; color: #FFF; } .collapse-button .icon-bar { background-color: #fff; border-radius: 1px 1px 1px 1px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); display: block; height: 2px; width: 18px; margin: 2px 0; } ul.slimmenu { padding-top:10px; padding-right:10px; text-align:right; margin-top:13px; margin-bottom:10px; -webkit-transition : all 0.5s ease-out; -moz-transition : all 0.5s ease-out; -o-transition :all 0.5s ease-out; transition : all 0.5s ease-out; } ul.slimmenu li { position: relative; display: inline-block; background:url('../images/line.html') 0 14px no-repeat; background-size:15px 10px; padding-left:20px; } ul.slimmenu > li {} ul.slimmenu > li:first-child { border-left: 0 } ul.slimmenu > li:last-child { margin-right: 0 } ul.slimmenu li a { display: block; color: #003333; padding: 10px 0px; cursor:pointer; margin: 0px 12px; font-family: 'Lato', sans-serif; font-weight:700; text-transform:uppercase; border-bottom:1px solid rgba(0,0,0,0); font-size: 12px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } ul.slimmenu li a:hover { text-decoration: none; } ul.slimmenu li { } ul.slimmenu li:first-child { background:none; } ul.slimmenu li .sub-collapser { position: absolute; right: 0; top: 0; width: 48px; height: 100%; z-index: 999; cursor: pointer; } ul.slimmenu li .sub-collapser:before { display:none; } ul.slimmenu li .sub-collapser > i { display:none; } ul.slimmenu li ul { margin: 0; list-style-type: none; } ul.slimmenu li ul a{ font-size:10px; } ul.slimmenu li ul li:first-child { background:none; } ul.slimmenu li ul li { background:none; padding-left:0; } ul.slimmenu li > ul { display: none; position: absolute; text-align:left; left: 0; top: 100%; z-index: 999; width: 150%; } ul.slimmenu li > ul > li ul { display: none; position: absolute; left: 100%; top: 0; z-index: 999; width: 100%; } ul.slimmenu.collapsed { padding:0; margin:0; } ul.slimmenu.collapsed li { display: block; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } ul.slimmenu.collapsed li a { display: block; border-bottom: 1px solid rgba(0, 0, 0, 0); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box } ul.slimmenu.collapsed li .sub-collapser { height: 40px; } ul.slimmenu.collapsed li > ul { display: none; position: static; } /* #Home ================================================== */ #home{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; background:#323232; z-index:2; } #sync3 .item { position: relative; margin: 0 auto; width: 100%; min-height:100%; height:100%; display: block; } #sync3 .item img{ width: 100%; height: 100%; object-fit: contain } .background1{ background:url('../images/1.jpg')no-repeat center center; background-size:cover; } .background2{ background:url('../images/2.jpg')no-repeat center center; background-size:cover; } .background3{ background:url('../images/3.jpg')no-repeat center center; background-size:cover; } /* #progetti{ background-color: #fff }*/ #bar{ width: 0%; max-width: 100%; height: 3px; } #progressBar{ width: 100%; background: #909090; } #sync4 { position:absolute; bottom:50px; left:50%; margin-left:-110px; width:220px; z-index:200; } #sync4 .item{ text-align: center; margin:0 auto; cursor: pointer; height: 3px; max-width:40px; background:rgba(255,255,255,.1); z-index:200; border:1px solid #fff; -webkit-transition : all 0.2s ease-out; -moz-transition : all 0.2s ease-out; -o-transition :all 0.2s ease-out; transition : all 0.2s ease-out; } .home-big-text { position:absolute; top:50%; margin-top:-90px; left:0; width:100%; font-family: 'GarnataRegular'; text-align:center; font-size: 75px; line-height:75px; color:#fff; z-index:100; } .home-small-text { position:absolute; top:50%; margin-top:17px; left:0; width:100%; font-family: 'Lato', sans-serif; font-weight:700; letter-spacing:4px; text-transform:uppercase; text-align:center; font-size: 14px; line-height:14px; color:#c4c4c4; z-index:100; } .line { position:absolute; top:50%; margin-top:-140px; left:50%; margin-left:-1px; width:2px; height:40px; background:url('../images/line.jpg')no-repeat center center; opacity:.5; z-index:100; } .line1 { position:absolute; top:50%; margin-top:66px; left:50%; margin-left:-1px; width:2px; height:40px; background:url('../images/line.jpg')no-repeat center center; opacity:.5; z-index:100; } .section-top { position: relative; margin: 0 auto; width: 100%; z-index:2; padding-top:100px; padding-bottom:100px; } .section-top .line-dark { position:absolute; top:0; margin-top:60px; left:50%; margin-left:-1px; width:2px; height:30px; background:url('../images/line-dark.jpg')no-repeat center center; opacity:.3; z-index:100; } .subtext-top { position: relative; width:100%; padding-top:20px; font-family: 'Lato', sans-serif; letter-spacing:2px; /*text-transform:uppercase;*/ text-align:center; font-size: 16px; line-height:26px; color:#0099cc; z-index:100; } .section-top .line-dark1 { position:absolute; bottom:0; margin-bottom:45px; left:50%; margin-left:-1px; width:2px; height:30px; background:url('../images/line-dark.jpg')no-repeat center center; opacity:.3; z-index:100; } .subsection-top { position: relative; margin: 0 auto; width: 100%; z-index:2; padding-bottom:55px; } .subsection-top h3 { padding-top:20px; } .subsection-top .subline-dark { position:absolute; top:0; left:50%; margin-left:-1px; width:2px; height:20px; background:url('../images/line-dark.jpg')no-repeat center center; opacity:.2; z-index:100; } .subsection-top .subline-dark1 { position:absolute; top:0; margin-top:75px; left:50%; margin-left:-1px; width:2px; height:20px; background:url('../images/line-dark.jpg')no-repeat center center; opacity:.2; z-index:100; } /* #About ================================================== */ #about{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; background:#fff; padding-bottom:80px; } .separ{ position: relative; margin: 0 auto; width: 100%; z-index:2; border-top:1px dashed #c4c4c4; opacity:.4; margin-top:60px; padding-bottom:60px; } .separ1 { position: relative; margin: 0 auto; width: 100%; z-index: 2; border-top: 1px dashed #c4c4c4; opacity: .4; margin-top: 20px; padding-bottom: 30px; } .about-top { position: relative; margin: 0 auto; text-align: center; width: 100%; /*background:url('../images/signature.png')no-repeat right bottom; background-size:152px 80px; padding-bottom:80px;*/ z-index: 2; } .padding-left-text-top{ padding-left:25px; } .about-top .biger-text { position: relative; width:100%; font-style: italic; font-family: 'Lato', sans-serif; font-weight:400; letter-spacing:3px; text-align:left; font-size: 20px; line-height:26px; color:#aaaaaa; z-index:100; text-align: center; } .about-top .biger-text:before { position: absolute; width:30px; height:30px; margin-top:-5px; margin-left:-35px; padding-left:25px; content:"\f10d"; font-family: 'FontAwesome'; text-align:center; font-size: 30px; line-height:30px; opacity:.4; z-index:-1; transform:rotate(3deg); -ms-transform:rotate(3deg); -webkit-transform:rotate(3deg); } .about-top .biger-text:after { position: absolute; width:30px; height:30px; margin-top:8px; margin-left:0px; content:"\f10e"; font-family: 'FontAwesome'; text-align:center; font-size: 30px; line-height:30px; opacity:.4; z-index:-1; transform:rotate(3deg); -ms-transform:rotate(3deg); -webkit-transform:rotate(3deg); } .about-top .sign{ margin-top: 10px; text-align: right; } .team-info{ position: relative; margin-top:50px; background:#f1f1f1; padding-top:20px; padding-bottom:20px; padding-left:20px; padding-right:20px; z-index:2; } .team-info h5{ text-align:left; padding-bottom:5px; z-index:5; } .team-subtext{ font-family: 'Lato', sans-serif; font-weight:400; font-size: 13px; line-height:13px; text-align:left; color: #4a3d3d; opacity:.5; padding-top:3px; font-style: italic; padding-bottom:20px; } .team-info p{ text-align:left; padding-bottom:20px; } .social-team{ position:relative; text-align:left; width:100%; } .team-social li { margin:0 auto; list-style: none; text-align:center; display: inline-block; cursor:pointer; } .team-social li.icon-team a { font-family: 'FontAwesome'; font-size: 16px; line-height: 16px; margin:0 auto; text-align:center; padding-right:15px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .team-social li:last-child.icon-team a{ padding-right:0; } .team-social li:hover{ } .team-social li:hover.icon-team a{ opacity:.6; } .team-info1{ position: relative; margin-top:50px; background:#f1f1f1; padding-top:20px; padding-bottom:20px; padding-left:20px; padding-right:20px; z-index:2; } .team-info1 h5{ text-align:right; padding-bottom:5px; z-index:5; } .team-subtext1{ font-family: 'Lato', sans-serif; font-weight:400; font-size: 13px; line-height:13px; text-align:right; color: #4a3d3d; opacity:.5; padding-top:3px; font-style: italic; padding-bottom:20px; } .team-info1 p{ text-align:right; padding-bottom:20px; } .team-body { height: 200px; overflow-y: auto; text-align: justify !important; padding: 0 10px 20px 10px } .team-title { color: #0099cc; font-weight: bold; height: 50px; } .social-team1{ position:relative; text-align:right; width:100%; } .team-social1 li { margin:0 auto; list-style: none; text-align:center; display: inline-block; cursor:pointer; } .team-social1 li.icon-team1 a { font-family: 'FontAwesome'; font-size: 16px; line-height: 16px; margin:0 auto; text-align:center; padding-left:15px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .team-social1 li:hover{ } .team-social1 li:hover.icon-team1 a{ opacity:.6; } .icon-team1 a { color: #66cc33 !important; } .team-img{ position: absolute; background:#f1f1f1; border-radius:50%; top:-50px; right:20px; width:120px; height:120px; z-index:2; } .team-img img{ width:100px; height:100px; display: block; border-radius:50%; margin-top:10px; margin-left:10px; } .team-img1{ position: absolute; background:#f1f1f1; border-radius:50%; top:-50px; left:20px; width:120px; height:120px; z-index:2; } .team-img1 img{ width:100px; height:100px; display: block; border-radius:50%; margin-top:10px; margin-left:10px; } #reviews{ background-color: #fff } /* #1st Parallax Section ================================================== */ #sep1 { position: relative; margin: 0 auto; width: 100%; overflow: hidden; padding-top: 120px; padding-bottom: 120px; } #sep1 ul li{ color: #ffffff; } .parallax1 { background: url('../images/parallax/1.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax1 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .parallax1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 959px) { .parallax1 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } #sepabout { position: relative; margin: 0 auto; width: 100%; overflow: hidden; padding-top: 180px; padding-bottom: 180px; } .parallaxabout { background: url('../images/parallax/2.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width: 100%; } @media only screen and (min-width: 1930px) { .parallaxabout { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .parallaxabout { background-size: cover; background-attachment: scroll; background-position: top center !important; } } @media only screen and (max-width: 959px) { .parallaxabout { background-size: cover; background-attachment: scroll; background-position: top center !important; } } .twit { position:relative; width:100%; overflow:hidden; margin:0 auto; text-align:center; } .twit a{ -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .twit a:hover{ color: #f1f1f1; } .twit p{ margin:0 auto; font-family: 'Lato', sans-serif; font-weight:400; color: #fff; padding-top:20px; padding-bottom:30px; text-transform:uppercase; text-align:center; letter-spacing:1px; font-size: 14px; line-height:20px; } .icon-twit { font-family: 'FontAwesome'; font-size: 32px; line-height: 32px; height: 32px; width:100%; text-align:center; } #sync1 .item { position: relative; margin: 0 auto; width: 99%; display: block; } #sync2 { position:absolute; bottom:0; left:50%; margin-left:-110px; width:220px; z-index:200; } #sync2 .item{ text-align: center; margin:0 auto; cursor: pointer; height: 3px; max-width:40px; background:rgba(255,255,255,.1); z-index:200; border:1px solid #fff; -webkit-transition : all 0.2s ease-out; -moz-transition : all 0.2s ease-out; -o-transition :all 0.2s ease-out; transition : all 0.2s ease-out; } /* #Work ================================================== */ #work{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; background:#fff; } .portfolio-wrap{ position: relative; /*width: 100%;*/ overflow:hidden; display: inline-block } .portfolio-box{ position: relative; width:25%; overflow:hidden; display:inline-block; float:left; margin-left:-1px; -webkit-transform:translateX(1px); -moz-transform:translateX(1px); -o-transform:translateX(1px); -ms-transform:translateX(1px); transform:translateX(1px); -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .portfolio-box a{ cursor:url('../images/more.cur'),crosshair; cursor:url('../images/more.png') 40 40,crosshair; } .portfolio-box img{ width: 100%; height: 300px; object-fit: cover; display:block; filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(90%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .portfolio-box:hover img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(0%); } .portfolio-box .mask{ position:absolute; background:rgba(255,255,255,.9); top:0; left:0; width: 100%; height:100%; display:block; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .portfolio-box:hover .mask{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .portfolio-box h4{ position:absolute; top:50%; margin-top:-7px; left:50%; transform: translate(-50%, -50%); /*width:100%;*/ padding: 5px; border-radius: 5px; z-index:100; font-family: 'Lato', sans-serif; font-weight:400; font-style: italic; text-transform:uppercase; color:#323232; font-size: 14px; line-height: 14px; background-color: rgba(255,255,255,.8); -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .portfolio-box:hover h4{ color: #003333; opacity:1; -webkit-transition-delay:200ms; -moz-transition-delay:200ms; -o-transition-delay:200ms; -ms-transition-delay:200ms; transition-delay:200ms; } .portfolio-box .line-folio { position:absolute; top:0; margin-top:-55px; left:50%; margin-left:-1px; width:2px; height:20px; opacity:.2; background:url('../images/line-dark.jpg')no-repeat center center; z-index:100; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .portfolio-box:hover .line-folio { top:50%; -webkit-transition-delay:200ms; -moz-transition-delay:200ms; -o-transition-delay:200ms; -ms-transition-delay:200ms; transition-delay:200ms; } .portfolio-box .line-folio1 { position:absolute; bottom:0; margin-bottom:-55px; left:50%; margin-left:-1px; width:2px; height:20px; opacity:.2; background:url('../images/line-dark.jpg')no-repeat center center; z-index:100; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .portfolio-box:hover .line-folio1 { bottom:50%; -webkit-transition-delay:200ms; -moz-transition-delay:200ms; -o-transition-delay:200ms; -ms-transition-delay:200ms; transition-delay:200ms; } #portfolio-filter { position:relative; width:100%; text-align: center; } #filter { position:relative; width:100%; } #filter li { display: inline-block; } #filter li a { position: relative; display: inline-block; font-family: 'Lato', sans-serif; font-weight:400; font-size: 14px; outline: none; color: #706e6e; text-decoration: none; text-transform: uppercase; text-shadow: 0 0 1px rgba(255,255,255,0.3); margin-left:8px; margin-right:8px; margin-bottom:20px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #filter li a:after { content:'::::'; font-family: 'Lato', sans-serif; font-weight:400; font-size: 12px; color: #706e6e; padding-left:20px; opacity:.5; } #filter li:last-child a:after { display:none; } #filter li a:hover { color: #bdb3b3; } .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; transition-duration: 0.6s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity; transition-property: transform, opacity; } #link-work{ position: relative; margin: 0 auto; text-align:center; width: 100%; overflow:hidden; padding-top:40px; padding-bottom:20px; z-index:2; } #link-work h5{ text-align:center; padding-bottom:10px; } #link-work a { position: relative; font-family: 'Satisfy', cursive; display: inline-block; outline: none; text-align:center; text-decoration: none; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 18px; margin-top:5px; } #link-work a:hover, #link-work a:focus { outline: none; } #link-work .cl-effect-5 a { overflow: hidden; text-align:center; text-align:center; } #link-work .cl-effect-5 a span { position: relative; display: inline-block; text-align:center; padding-top:10px; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; } #link-work .cl-effect-5 a span::before { position: absolute; top: 100%; padding-top:10px; color:#101010; content: attr(data-hover); text-align:center; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } #link-work .cl-effect-5 a:hover span, #link-work .cl-effect-5 a:focus span { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); text-align:center; } #partner{ background-color: #fff; } /* #Projects ================================================== */ /* Expander Item Styles */ .relative{ position: relative; } .portfolio{ width:100%; height: auto; margin:0 auto; max-width: 960px; } .expander-wrap { position:relative; display: none; text-align: center; } #expander-wrap{ position: relative; width:100%; max-width:960px; margin:0 auto; overflow: hidden; } /* Expander Item Controls */ .project-controls{ position: relative; width:100%; height: auto; top:105px; max-width: 960px; margin:0 auto; } .expander-inner{ position: relative; } .cls-btn{ width:100%; padding: 0; margin: 0 auto; display: block; height: auto; } .expander-wrap .cls-btn .close { position:relative; display: inline-block; color:#000; top:0; margin-top:105px; width:auto; height:auto; font-size:30px; font-weight:100; text-align:center; cursor: pointer; float:none; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .expander-close:hover { color:#3a3a3a; cursor:pointer; } .project{ position: relative; width: 100%; } #project-single-slider{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; padding-top:10px; padding-bottom:20px; } #project-single-slider h1{ color:#fff; } #project-single-slider .bx-wrapper .bx-prev { bottom:20px; } #project-single-slider .bx-wrapper .bx-next { bottom:20px; } #last-work{ position: relative; margin: 0 auto; padding-bottom:20px; width: 100%; overflow:hidden; z-index:2; } #last-work img{ width: 100%; height:auto; display:block; } #last-work h3{ text-align:center; padding-bottom:25px; } #last-work h5{ text-align:left; padding-bottom:20px; } #last-work p{ text-align:left; padding-bottom:30px; } #last-work p:last-child{ padding-bottom:0; } #slider-wrap{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; } #slider-wrap img{ width: 100%; height:auto; display:block; } .padding-project{ padding-top:50px; padding-bottom:50px; } #project-single-video{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; } #project-single-video h1{ color:#fff; } #thevideo{ display:none; } .video{ width: 100%; height:auto; display:block; } iframe{ width:100%; height:auto; display:block; } .onclick img{ cursor:pointer; } .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* Icon Fonts *********************************/ /* Font-face Icons */ @font-face { font-family: 'flexslider-icon'; src:url('font/flexslider-icon.eot'); src:url('font/flexslider-icond41d.eot?#iefix') format('embedded-opentype'), url('font/flexslider-icon.woff') format('woff'), url('font/flexslider-icon.ttf') format('truetype'), url('font/flexslider-icon.svg#flexslider-icon') format('svg'); font-weight: normal; font-style: normal; } /* FlexSlider Necessary Styles *********************************/ .flexslider {margin: 0; padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ .slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .carousel li { margin-right: 5px; } /* Direction Nav */ .flex-direction-nav {*height: 0;} .flex-direction-nav a { display: block; width: 35px; height: 50px; position: absolute; top: 50%;margin-top:-25px;z-index: 100; overflow: hidden; opacity: 1; cursor: pointer; color: rgba(0,0,0,0); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } .flex-direction-nav .flex-prev { left: 0;background:url('../images/arr1.png') no-repeat center center; background-color:rgba(60,60,60,.7); } .flex-direction-nav .flex-next { right: 0; background:url('../images/arr2.png') no-repeat center center;background-color:rgba(60,60,60,.7); } .flexslider:hover .flex-prev { opacity: 0.7; } .flexslider:hover .flex-next { opacity: 0.7; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; } .flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; } .flex-direction-nav a:before {} .flex-direction-nav a.flex-next:before {} /* Pause/Play */ .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } .flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; } .flex-pauseplay a:hover { opacity: 1; } .flex-pauseplay a.flex-play:before { content: '\f003'; } /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;} .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } .flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; } .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} .flex-control-thumbs li {width: 25%; float: left; margin: 0;} .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px;} .flex-direction-nav .flex-next { opacity: 1; right: 10px;} } /* #Logos ================================================== */ #logos{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; background:#fff; padding-top:50px; padding-bottom:50px; } #owl-logos{ position: relative; margin: 0 auto; text-align:center; width: 100%; overflow:hidden; } #owl-logos li img{ margin: 0 auto; text-align:center; display:block; width:100px; height:65px; } /* #2nd Parallax Section ================================================== */ #sep2{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; padding-top:120px; padding-bottom:120px; } .parallax2 { background: url('../images/parallax/2.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax2 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .parallax2 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 959px) { .parallax2 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .facts-wrap{ position: relative; width: 100%; margin:0 auto; text-align:center; } .facts-wrap h5{ font-family: 'Lato', sans-serif; font-weight:400; padding-top:25px; font-size: 16px; line-height:16px; text-transform:uppercase; color:#fff; text-align:center; } .facts-wrap h5:before{ padding-right:10px; content:"\f101"; font-family: 'FontAwesome'; font-size: 16px; line-height:16px; } .facts-wrap h5:after{ padding-left:10px; content:"\f100"; font-family: 'FontAwesome'; font-size: 16px; line-height:16px; } .facts-wrap-num{ font-family: 'GarnataRegular'; font-size: 70px; line-height:70px; margin:0 auto; text-align:center; } /* #Services ================================================== */ #services{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; background:#fff; padding-bottom:80px; } .services-box{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; padding-bottom:40px; text-align:center; z-index:2; } .services-box img{ margin: 0 auto; text-align:center; width: 40px; height: 40px; display:block; padding-bottom:10px; } .services-box h5{ text-align:center; } .services-box p{ text-align:center; padding-top:20px; } .owl-wrap{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; } #sync5 .item { position: relative; margin: 0 auto; width: 100%; display: block; } #sync6 { position:absolute; bottom:10px; left:50%; margin-left:-55px; width:110px; z-index:200; } #sync6 .item{ text-align: center; margin:0 auto; cursor: pointer; height: 3px; max-width:40px; background:rgba(32,32,32,.1); z-index:200; border:1px solid #323232; -webkit-transition : all 0.2s ease-out; -moz-transition : all 0.2s ease-out; -o-transition :all 0.2s ease-out; transition : all 0.2s ease-out; } .pricing{ position: relative; margin: 0 auto; background:#003333; padding:40px 5px 30px 5px; text-align:center; border-radius:5px; margin-left:5px; margin-right:5px; z-index:2; color: #fff; min-height: 250px; } .pricing .background-center{ position: absolute; left:0; top:0; height:100%; width: 100%; background:#003333; box-shadow: 0 0 3px rgba(32,32,32,.15); -webkit-transform: scale(0.92); -moz-transform: scale(0.92); -ms-transform: scale(0.92); -o-transform: scale(0.92); transform: scale(0.92); border-radius:5px; z-index:-1; } .pricing .background-left{ position: absolute; right:0; top:0; height:100%; width: 2000px; background:#003333; box-shadow: 16px 0 8px -8px rgba(32,32,32,.15); border-radius:5px; z-index:-1; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .pricing:hover .background-left{ box-shadow: 12px 0 8px -8px rgba(32,32,32,.15); } .pricing .background-right{ position: absolute; left:0; top:0; height:100%; width: 2000px; background:#003333; z-index:-1; box-shadow: -16px 0 8px -8px rgba(32,32,32,.15); border-radius:5px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .pricing:hover .background-right{ box-shadow: -12px 0 8px -8px rgba(32,32,32,.15); } .featured{ } .plan-icon { position:relative; font-family: 'FontAwesome'; text-align:center; font-size:22px; line-height:22px; margin-bottom:20px; } .pricing h5{ padding-bottom:20px; color: #414141; } .pricing h5 span{ font-size:90%; } .featured h5{ } .pricing p{ font-family: 'Lato', sans-serif; font-weight:400; letter-spacing:1px; text-align:center; text-transform:uppercase; font-size: 12px; line-height:22px; padding-bottom:10px; } .cl-effect-12 a { position: relative; display: inline-block; margin: 10px 25px; outline: none; text-decoration: none; font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; font-size: 12px; } .cl-effect-12 a:hover, .cl-effect-12 a:focus { outline: none; } .cl-effect-12 a::before, .cl-effect-12 a::after { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border: 2px solid rgba(0,0,0,0.1); border-radius: 50%; content: ''; opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.2); -moz-transform: translateX(-50%) translateY(-50%) scale(0.2); transform: translateX(-50%) translateY(-50%) scale(0.2); } .cl-effect-12 a::after { width: 20px; height: 20px; border-width: 4px; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.8); -moz-transform: translateX(-50%) translateY(-50%) scale(0.8); transform: translateX(-50%) translateY(-50%) scale(0.8); } .cl-effect-12 a:hover::before, .cl-effect-12 a:hover::after, .cl-effect-12 a:focus::before, .cl-effect-12 a:focus::after { opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -moz-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); } /* #3rd Parallax Section ================================================== */ .sep3{ position: relative; margin: 0 auto; text-align:center; width: 100%; overflow:hidden; padding-top:120px; padding-bottom:120px; } .parallax3 { background: url('../images/parallax/4.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax3 { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .parallax3 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 959px) { .parallax3 { background-size: cover; background-attachment: scroll; background-position: top center!important; } } .sep3 h3{ text-align:center; color:#fff; } .sep3 p { text-align: center; color: #f1f1f1; font-family: 'Lato', sans-serif; /*text-transform: uppercase;*/ letter-spacing: 2px; font-weight: 700; /*line-height:12px;*/ padding-bottom: 5px; } .line-paralax3{ position:relative; text-align:center; margin:0 auto; padding-bottom:30px; margin-top:45px; width:70px; border-top:1px solid #fff; } .sep3 .cl-effect-12 a { margin: 0 25px; text-align:center; text-decoration: none; font-family: 'Lato', sans-serif; text-transform: uppercase; width:180px; background:rgba(255,255,255,.9); height:50px; line-height:50px; border-radius:3px; letter-spacing: 3px; font-weight: 700; font-size: 12px; z-index:5; } .sep3 .cl-effect-12 a::before, .sep3 .cl-effect-12 a::after { border: 2px solid rgba(0,0,0,0.1); z-index:2; } /* #Blog ================================================== */ #blog{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; background:#fff; } .blog-wrap{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; background:#fff; margin-top:20px; } .post-wrap{ position: relative; margin: 0 auto; text-align:center; width: 50%; float:left; display:inline-block; overflow:hidden; z-index:2; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; } .post-wrap img{ width: 100%; height:auto; display:block; } .post-wrap .mask-blog{ position: absolute; top:0; left:0; width: 100%; height:100%; z-index:5; background:rgba(255,255,255,.7); -webkit-transition : all 0.2s ease-out; -moz-transition : all 0.2s ease-out; -o-transition :all 0.2s ease-out; transition : all 0.2s ease-out; } .post-wrap:hover .mask-blog{ background:rgba(255,255,255,.8); } .post-wrap .mask-blog::before{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0px solid transparent; content: ''; -webkit-transition: border-width 0.4s, border-color 0.4s; -moz-transition: border-width 0.4s, border-color 0.4s; -ms-transition: border-width 0.4s, border-color 0.4s; -o-transition: border-width 0.4s, border-color 0.4s; transition: border-width 0.4s, border-color 0.4s; } .post-wrap:hover .mask-blog::before{ border-width: 20px; border-color: rgba(0,0,0,.2); } .post-wrap a { display:block; cursor:url('../images/more.cur'),crosshair; cursor:url('../images/more.png') 40 40,crosshair; } .post-wrap .doubleflip { position: absolute; top: 20px; right:20px; width: 70px; height: 70px; z-index:100; -webkit-transition: -webkit-transform 0.3s 0.3s; -moz-transition: -moz-transform 0.3s 0.3s; -ms-transition: -ms-transform 0.3s 0.3s; -o-transition: -o-transform 0.3s 0.3s; transition: transform 0.3s 0.3s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .post-wrap .doubleflip img{ width: 70px; height: 70px; display:block; } .post-wrap:hover .doubleflip { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .post-wrap .doubleflip1 { position: absolute; top: 20px; right:90px; width: 70px; height: 70px; z-index:100; background:#323232; -webkit-transition: -webkit-transform 0.3s 0.3s; -moz-transition: -moz-transform 0.3s 0.3s; -ms-transition: -ms-transform 0.3s 0.3s; -o-transition: -o-transform 0.3s 0.3s; transition: transform 0.3s 0.3s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .post-wrap .doubleflip1 p{ color:#f1f1f1; font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; font-size: 10px; line-height:20px; padding-top:15px; } .post-wrap .doubleflip1 p span{ } .post-wrap:hover .doubleflip1 { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; -ms-transition-delay: 0.4s; -o-transition-delay: 0.4s; transition-delay: 0.4s; } .post-wrap h4{ position:absolute; top:50%; margin-top:-7px; left:0; width:100%; z-index:100; font-family: 'Lato', sans-serif; font-weight:400; text-transform:uppercase; color:#323232; font-size: 14px; line-height: 14px; opacity:1; } .post-wrap .line-blog { position:absolute; top:50%; margin-top:-55px; left:50%; margin-left:-1px; width:2px; height:20px; opacity:.2; background:url('../images/line-dark.jpg')no-repeat center center; z-index:100; } .post-wrap .line-blog1 { position:absolute; bottom:50%; margin-bottom:-55px; left:50%; margin-left:-1px; width:2px; height:20px; opacity:.2; background:url('../images/line-dark.jpg')no-repeat center center; z-index:100; } .post-wrap *, .post-wrap *:after, .post-wrap *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .post-wrap .clearfix:before, .post-wrap .clearfix:after { content: ''; display: table; } .post-wrap .clearfix:after { clear: both; } /* #Blog Post ================================================== */ #blog-post{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; } .blog-post-down{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; padding-bottom:80px; padding-top:80px; z-index:2; } .blog-post-down p{ text-align:left; } .blog-post-down img{ width:100%; height:auto; display:block; } .blog-post-down p span{ text-align:left; font-size:150%; } .blog-padding{ padding-bottom:20px; } .color-1 nav a { position: absolute; top: 50%; display: block; outline: none; z-index: 1000; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .color-1 nav a.prev { left: 0; text-align: left; } .color-1 nav a.next { right: 0; text-align: right; } .color-1 { position: relative; background: #003333; display: block; padding-top: 20px; padding-bottom: 20px; height:40px; } .nav-slide .icon-wrap { position: relative; z-index: 100; display: block; padding: 20px; background-color: #fff; font-family: 'FontAwesome'; font-size: 14px; } .nav-slide div { position: absolute; top: 50%; padding: 0 80px; background-color: #323232; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .nav-slide a.prev div { left: 0; padding-right: 120px; -webkit-transform: translateY(-50%) translateX(-100%); transform: translateY(-50%) translateX(-100%); } .nav-slide a.next div { right: 0; padding-left: 120px; -webkit-transform: translateY(-50%) translateX(100%); transform: translateY(-50%) translateX(100%); } .nav-slide h4 { position: relative; margin: 0; padding-top: 20px; padding-bottom: 20px; color: #fff; font-size:150%; white-space: nowrap; } .nav-slide a.next div h4 { margin-left: 20px; } .nav-slide a.prev div h4 { margin-right: 20px; } .nav-slide div h4 span { display: block; color: #95a5a6; font-style: italic; font-size: 45%; font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif; } .nav-slide img { position: absolute; top: 0; height: 100%; } .nav-slide a.prev img { right: 0; } .nav-slide a.next img { left: 0; } .nav-slide a:hover div { -webkit-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); } @media screen and (max-width: 520px) { .nav-slide a.prev img { display:none; } .nav-slide a.next img { display:none; } .nav-slide a.prev div { padding-right: 20px; } .nav-slide a.next div { padding-left: 20px; } } /* Blog Parallax Section ================================================== */ .parallax-blog { background: url('../images/parallax/1.jpg') repeat fixed; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; width:100%; } @media only screen and (min-width: 1930px) { .parallax-blog { background-size: cover; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .parallax-blog { background-size: cover; background-attachment: scroll; background-position: top center!important; } } @media only screen and (max-width: 959px) { .parallax-blog { background-size: cover; background-attachment: scroll; background-position: top center!important; } } /* #Contact ================================================== */ #contact{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; /*background:#fff;*/ padding-bottom:40px; } .owl-wrap-contact{ position: relative; margin: 0 auto; width: 100%; overflow:hidden; z-index:2; } #sync7 .item { position: relative; margin: 0 auto; width: 100%; display: block; padding-bottom:120px; } #sync7 .item h3{ text-align:center; letter-spacing: 3px; font-size:200%; } .padding-bottom-contact{ padding-bottom:45px; } #sync7 .item p{ text-align:center; color:#66cc33; font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 12px; line-height:12px; } #sync8 { position:absolute; bottom:10px; left:50%; margin-left:-105px; width:210px; z-index:200; } #sync8 .item{ color: #09c; position:relative; text-align: center; margin:0 auto; cursor: pointer; height: 60px; width:60px; z-index:200; border-top:1px solid #fff; padding-top:25px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #sync8 .item:hover { background:url('../images/arrow-up.png') no-repeat top center; } #sync8 .synced .item { background:url('../images/arrow-up.png') no-repeat top center; } .icon-contact { position: relative; width:60px; font-family: 'FontAwesome'; text-align:center; font-size: 14px; z-index:4; } #ajax-form { width: 100%; font-family: 'Lato', sans-serif; font-weight:400; text-transform:uppercase; margin-left: auto; margin-right: auto; color:#7a7a7a; text-align:left; } label { display: block; font-family: 'Lato', sans-serif; font-weight:400; text-transform:uppercase; font-size:12px; line-height:12px; padding-bottom:10px; } input{ width: 96%; border:none; background:#f1f1f1; font-family: 'Lato', sans-serif; font-weight:400; font-size:12px; line-height:18px; margin-bottom: 15px; padding-top: 10px; padding-bottom: 10px; } textarea { width: 96%; background:#f1f1f1; font-family: 'Lato', sans-serif; font-weight:400; font-size:12px; line-height:18px; height:120px; padding-top: 10px; padding-bottom: 10px; padding-left:0; padding-right:0; border:none; } .error { font-family: 'Lato', sans-serif; font-weight:400; text-transform:uppercase; font-size:12px; line-height:18px; display: none; } #ajaxsuccess { background: #f5f5f5; color:#000; font: 20px/60px 'OpenSans-Light-webfont'; height:60px; display: none; padding-left:10px; width: 100%; margin-left: auto; margin-right: auto; margin-top: 30px; } #err-form{ text-align:center; } #ajax-form button{ text-align:center; background: #f1f1f1; font-family: 'Lato', sans-serif; font-weight:400; text-transform:uppercase; font-size: 14px; line-height:22px; } #ajax-form button:hover{ background: #f8f8f8; } #ajax-form button:active, #ajax-form textarea:active, #ajax-form input:active { color: #333333; outline:1px solid #fff;} #ajax-form textarea:active, #ajax-form input:hover { color: #333333; outline:1px solid #fff;} #ajax-form textarea, #ajax-form input { color: #333333; outline:1px solid #fff;} #ajax-form input[type="text"]{ padding-left:2%; padding-right:2%; } #ajax-form input[type="text"], textarea{ padding-left:2%; padding-right:2%; } #map{ position: relative; display: block; width: 100%; margin-top:15px; height: 410px; } .overlay{ display:block; z-index:10; text-align:center; height:80px; width:102px; background:transparent url(../images/marker.png)no-repeat bottom center; } .overlay_arrow{ left:50%; margin-left:-16px; width:0; height:0; position:absolute; } .overlay_arrow.above{ bottom:-13px; border-left:16px solid transparent; border-right:16px solid transparent; border-top:16px solid #000; } .overlay_arrow.below{ top:-15px; border-left:16px solid transparent; border-right:16px solid transparent; border-bottom:16px solid #000; } /* #footer ================================================== */ #footer{ position: relative; margin: 0 auto; width: 100%; background:#0099cc; padding-top:80px; padding-bottom:55px; } #footer .back-top{ color: #FFF; position: absolute; cursor:pointer; top:-10px; left:50%; margin-left:-20px; width:40px; height:40px; font-family: 'FontAwesome'; border-top-left-radius:3px; border-top-right-radius:3px; text-align:center; z-index:1000; font-size: 22px; line-height: 40px; background:#323232; /*-webkit-box-shadow: 0 -5px 15px -5px #000; -moz-box-shadow: 0 -5px 15px -5px #000; box-shadow: 0 -5px 15px -5px #000;*/ -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } #footer .back-top:hover{ background:#323232; /*-webkit-box-shadow: 0 -5px 5px -5px #000; -moz-box-shadow: 0 -5px 5px -5px #000; box-shadow: 0 -5px 5px -5px #000;*/ } #footer p{ font-size: 12px; line-height:22px; text-align:center; padding-bottom:5px; color:#f8f8f8; font-family: 'Lato', sans-serif; font-weight:400; text-transform:uppercase; font-size: 11px; line-height:22px; letter-spacing: 1px; } .icon-footer{ font-family: 'FontAwesome'; font-size: 14px; line-height: 22px; text-align:center; margin:0 auto; z-index:6; padding-left:4px; padding-right:4px; } .social-bottom{ position:relative; width:100%; z-index:1002; padding-top:5px; padding-bottom:5px; height:30px; text-align:center; } .list-social1 li { padding:0; list-style: none; text-align:center; width:24px; display: inline-block; cursor:pointer; margin-left:2px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .list-social1 li.icon-soc1 a { color: #fff; font-family: 'FontAwesome'; font-size: 14px; line-height: 30px; width:24px; opacity:1; margin:0; padding:0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } .list-social1 li:hover{ } .list-social1 li:hover.icon-soc1 a{ opacity:.6; } /* #Media Queries ================================================== */ @media only screen and (max-width: 800px) { .logo{ width:90px; height:80px; left:10px; top:0px; background:url('../images/logo.png') no-repeat center center; background-size:contain; } .cbp-af-header.cbp-af-header-shrink .logo{ width:80px; height:60px; left:10px; top:10px; background:url('../images/logo1.png') no-repeat center center; background-size:contain; -webkit-transition : all 0.5s ease-out; -moz-transition : all 0.5s ease-out; -o-transition :all 0.5s ease-out; transition : all 0.5s ease-out; } .cbp-af-header.cbp-af-header-shrink ul.slimmenu li a { border-bottom:none; } .cbp-af-header.cbp-af-header-shrink ul.slimmenu li a:hover { border-bottom:none; background:none; } .cbp-af-header.cbp-af-header-shrink ul.slimmenu li { background:none; } ul.slimmenu li a: { border-bottom:none; } ul.slimmenu li a:hover { border-bottom:none; background:none; } ul.slimmenu li { background:none; } ul.slimmenu li > ul { width: 100%; text-align:right; } .post-wrap .doubleflip { display:none; } .post-wrap .doubleflip1 { display:none; } .home-big-text { margin-top:-79px; font-size: 55px; line-height:55px; } .home-small-text { margin-top:6px; font-size: 12px; line-height:12px; } .line { margin-top:-129px; } .line1 { margin-top:55px; } #filter li a:after { content:none; padding-left:0; } #sync7 .item h3{ font-size:140%; letter-spacing: 3px; } } @media only screen and (max-width: 1100px) { .post-wrap{ width: 100%; } } @media only screen and (min-width: 960px) and (max-width: 1199px) { } @media only screen and (min-width: 768px) and (max-width: 959px) { } @media only screen and (min-width: 480px) and (max-width: 767px) { .portfolio-box{ width: 50%; } .pricing .background-left{ display:none; } .pricing .background-center{ display:none; } .pricing .background-right{ display:none; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .portfolio-box{ width: 50%; } .pricing .background-left{ display:none; } .pricing .background-center{ display:none; } .pricing .background-right{ display:none; } } @media only screen and (max-width: 319px) { .portfolio-box{ width: 100%; } .pricing .background-left{ display:none; } .pricing .background-center{ display:none; } .pricing .background-right{ display:none; } .team-info h5{ padding-top:50px; } .team-info1 h5{ padding-top:50px; } } /* #Font-Face ================================================== */ @font-face { font-family: 'OpenSans-Light-webfont'; src: url('font/OpenSans-Light-webfont.eot'); src: url('font/OpenSans-Light-webfontd41d.eot?#iefix') format('embedded-opentype'), url('font/OpenSans-Light-webfont.woff') format('woff'), url('font/OpenSans-Light-webfont.ttf') format('truetype'), url('font/OpenSans-Light-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'GarnataRegular'; src: url('font/GarnataRegular.eot'); src: url('font/GarnataRegulard41d.eot?#iefix') format('embedded-opentype'), url('font/GarnataRegular.woff') format('woff'), url('font/GarnataRegular.ttf') format('truetype'), url('font/GarnataRegular.svg') format('svg'); font-weight: normal; font-style: normal; } .m-0 { margin: 0 !important; } .mt-0, .my-0 { margin-top: 0 !important; } .mr-0, .mx-0 { margin-right: 0 !important; } .mb-0, .my-0 { margin-bottom: 0 !important; } .ml-0, .mx-0 { margin-left: 0 !important; } .m-1 { margin: 0.25rem !important; } .mt-1, .my-1 { margin-top: 0.25rem !important; } .mr-1, .mx-1 { margin-right: 0.25rem !important; } .mb-1, .my-1 { margin-bottom: 0.25rem !important; } .ml-1, .mx-1 { margin-left: 0.25rem !important; } .m-2 { margin: 0.5rem !important; } .mt-2, .my-2 { margin-top: 0.5rem !important; } .mr-2, .mx-2 { margin-right: 0.5rem !important; } .mb-2, .my-2 { margin-bottom: 0.5rem !important; } .ml-2, .mx-2 { margin-left: 0.5rem !important; } .m-3 { margin: 1rem !important; } .mt-3, .my-3 { margin-top: 1rem !important; } .mr-3, .mx-3 { margin-right: 1rem !important; } .mb-3, .my-3 { margin-bottom: 1rem !important; } .ml-3, .mx-3 { margin-left: 1rem !important; } .m-4 { margin: 1.5rem !important; } .mt-4, .my-4 { margin-top: 1.5rem !important; } .mr-4, .mx-4 { margin-right: 1.5rem !important; } .mb-4, .my-4 { margin-bottom: 1.5rem !important; } .ml-4, .mx-4 { margin-left: 1.5rem !important; } .m-5 { margin: 3rem !important; } .mt-5, .my-5 { margin-top: 3rem !important; } .mr-5, .mx-5 { margin-right: 3rem !important; } .mb-5, .my-5 { margin-bottom: 3rem !important; } .ml-5, .mx-5 { margin-left: 3rem !important; } .p-0 { padding: 0 !important; } .pt-0, .py-0 { padding-top: 0 !important; } .pr-0, .px-0 { padding-right: 0 !important; } .pb-0, .py-0 { padding-bottom: 0 !important; } .pl-0, .px-0 { padding-left: 0 !important; } .p-1 { padding: 0.25rem !important; } .pt-1, .py-1 { padding-top: 0.25rem !important; } .pr-1, .px-1 { padding-right: 0.25rem !important; } .pb-1, .py-1 { padding-bottom: 0.25rem !important; } .pl-1, .px-1 { padding-left: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .pt-2, .py-2 { padding-top: 0.5rem !important; } .pr-2, .px-2 { padding-right: 0.5rem !important; } .pb-2, .py-2 { padding-bottom: 0.5rem !important; } .pl-2, .px-2 { padding-left: 0.5rem !important; } .p-3 { padding: 1rem !important; } .pt-3, .py-3 { padding-top: 1rem !important; } .pr-3, .px-3 { padding-right: 1rem !important; } .pb-3, .py-3 { padding-bottom: 1rem !important; } .pl-3, .px-3 { padding-left: 1rem !important; } .p-4 { padding: 1.5rem !important; } .pt-4, .py-4 { padding-top: 1.5rem !important; } .pr-4, .px-4 { padding-right: 1.5rem !important; } .pb-4, .py-4 { padding-bottom: 1.5rem !important; } .pl-4, .px-4 { padding-left: 1.5rem !important; } .p-5 { padding: 3rem !important; } .pt-5, .py-5 { padding-top: 3rem !important; } .pr-5, .px-5 { padding-right: 3rem !important; } .pb-5, .py-5 { padding-bottom: 3rem !important; } .pl-5, .px-5 { padding-left: 3rem !important; } .dona{ max-width: 500px; margin: 0 auto; } .dona img{ width: 100%; } .text_dona { width: 100%; text-align: center; color: #66cc33 } .text-center{ text-align: center; } .loader-container { z-index: 1000; width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: #fff; display: flex; justify-content: center; align-items: center; } .loader-content { width: 150px; height: 150px; position: relative; } .circle-border { width: 150px; height: 150px; padding: 3px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: rgb(102,204,51); background: linear-gradient(0deg, rgba(102,204,51,0.1) 33%,rgba(102,204,51,1) 100%); animation: spin .8s linear 0s infinite; } .circle-core{ width: 100%; height: 100%; border-radius: 50%; background-color: #fff; } .circle-logo { position: absolute; width: 110px; height: 110px; top: 50%; left: 50%; background: url('../images/logo.png') no-repeat center center; background-size: contain; transform: translate(-50%,-50%) } @keyframes spin { from{ transform: rotate(0); } to { transform: rotate(359deg); } } .text-primary { color: #66cc33; } .text-default { color: #003333; } dialog { margin: 10% auto; width: 80%; max-width: 350px; background-color: #fff; padding: 34px; border: 0; border-radius: 5px; } dialog::backdrop{ content: ''; background: rgba(0,0,0,.6) } dialog > p { text-align: center; margin: 0; } dialog > p:first-of-type { margin: 0 auto 20px; font-size: 32px; font-weight: 600; } dialog > button { margin: 20px auto; }