/* Theme Name: Fash50 */ /*css starts here*/ 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 { 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; } table, th, td { border: none } table { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin: 0 0 1.6em; table-layout: fixed; /* Prevents HTML tables from becoming too wide */ width: 100%; } caption, th, td { font-weight: normal; text-align: left; } th { border-width: 0 1px 1px 0; font-weight: 700; } td { border-width: 0 1px 1px 0; } th, td { padding: 0.4em; } th { font-size: 24px; letter-spacing: 1px; line-height: 28px; } /* =Global----------------------------------------------- */ * { margin: 0; padding: 0; border: none; box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; line-height: normal } input { border: 0; outline: none } img { border: none; outline: none; max-width: 100%; height: auto } ul, ul li { list-style: none; } ol, ol li { list-style: decimal; } input[type="submit"], input[type="button"] { cursor: pointer } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 } .clearfix { display: inline-block } * html .clearfix { height: 1%; } .clearfix { display: block } textarea, input[type="text"], input[type="button"], input[type="submit"] { -webkit-appearance: none; border-radius: 0; resize: none; max-width: 100%; } p, span, a, small, blockquote, ul, li { line-height: normal; } figure { max-width: 100% } blockquote, q { quotes: "" ""; font-size: 26px; font-style: italic; line-height: 1; color: #000; font-family: Arial, Helvetica, sans-serif; padding: 20px 0; } a { text-decoration: none; color: inherit; outline: none; } h1, h2, h3, h4, h5, h6 { margin: 0; line-height: normal; color: #fff; padding-bottom: 5px; } h1 { font-size: 34px; line-height: 36px; } h2 { font-size: 30px; line-height: 32px; } h3 { font-size: 24px; line-height: 28px; } h4 { font-size: 20px; line-height: 24px; } h5 { font-size: 18px; line-height: 20px; } h6 { font-size: 16px; line-height: 18px; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.625em; } /* Text elements */ p { color: #fff; font-family: "robotolight"; font-size: 17px; line-height: 150%; margin-bottom: 0; } dl { margin: 0 1.625em; } dt { font-weight: bold; } dd { margin-bottom: 1.625em; } strong { font-weight: bold; } cite, em, i { font-style: italic; } blockquote { font-style: italic; font-weight: normal; margin: 0 1em; } blockquote em, blockquote i, blockquote cite { font-style: normal; } blockquote cite { color: #666; font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 300; letter-spacing: 0.05em; text-transform: uppercase; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } a img { border: 0; } pre { background: #f4f4f4; font: 13px "Courier 10 Pitch", Courier, monospace; line-height: 1.5; margin-bottom: 1.625em; overflow: auto; padding: 0.75em 1.625em; } sup, sub { font-size: 10px; height: 0; line-height: 1; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } /* Links */ a { color: #ffb910; text-decoration: none; /*transition: all 0.5s ease-in-out 0s;*/ } a:focus, a:active, a:hover { text-decoration: none; } :focus { /* remember to define focus styles! */ outline: 0; } table { /* tables still need 'cellspacing="0"' in the markup */ border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; vertical-align: top; } th, td { color: #000; font-size: 16px; line-height: 19px; text-align: left; } table img { margin: 0 !important; width: 100%; } /* Reset CSS ENDS HERE */ html { -webkit-font-smoothing: antialiased; height: 100%; } body { font-size: 14px; color: #fff; font-family: 'robotolight'; background: #272727 url(../images/body_bg.jpg) repeat center top; -webkit-font-smoothing: antialiased; height: 100%; overflow-x: hidden; /*background-attachment:fixed !important;*/ } .wrapper { max-width: 1170px; margin: 0 auto; } div#siteloader { position: fixed; left: 0; top: 0; z-index: 9999999; width: 100%; height: 100%; overflow: visible; background: #000 url(../images/ajax-loader.gif) no-repeat center center; } /* layout */ #layout { float: left; width: 100%; height: 100%; padding-top: 60px; } #layout.fixed { padding-top: 105px; } /*********Header Css*********/ header { float: left; width: 100%; background: #000; text-align: center; padding: 0 55px; position: fixed; z-index: 999999; left: 0; top: 0; height:60px; } .cam_logo { display: inline-block; margin: 0; padding: 0; width: 120px; float: right; height: 60px; } .cam_logo img { vertical-align: top; } header a.logo { display: inline-block; width: 134px; vertical-align: top; position: absolute; left: 0; right: 0; top: 14px; margin: auto; } header a.logo img { vertical-align: top; } header ul.social { list-style: none; float: left; width: auto; margin-top: 20px; } header ul.social li { list-style: none; display: inline-block; float: left; width: auto; margin-left: 8px; } header ul.social li:first-child { margin-left: 0; background: url(../images/header_sep_small.png) no-repeat right top; padding-right: 12px; margin-right: 4px; } header ul.social li a { display: block; } header ul.social li a img { opacity: 1; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; } header ul.social li.si a img { height:20px; } header ul.social li.twitter a img, header ul.social li.facebook a img { width:22px; } header ul.social li a:hover img { opacity: 0.7; } header ul.social li:first-child a:hover img { opacity: 1; } /********************************************Banner Css******************************************************************/ .banner { float: left; width: 100%; /*height:100%;*/ position: relative; /*overflow:hidden;*/ } .banner .big_logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; padding: 0; z-index: 999; width: 831px; height: 272px; background: url(../images/fit_logo_big_bg.png) no-repeat center top; overflow: hidden; } .big_logo .logo { display: inline-block; width: auto; margin-top: 12px; float: left; margin-left: 34px; } .big_logo .logo img { vertical-align: top; } .big_logo .inner_links { float: left; width: 100%; text-align: left; text-transform: uppercase; margin-top: -21px; } .big_logo span { font-family: 'robotolight_italic'; font-size: 24px; line-height: 26px; color: #fff; margin-left: 60px; display: inline-block; letter-spacing: 1px; } .big_logo p { font-family: 'robotolight_italic'; font-size: 30px; line-height: 37px; color: #fff; padding: 4px 0 0 105px; letter-spacing: 1px; } .big_logo p a { color: #e3b924; } .big_logo p a:hover { color: #fff; } .big_logo p small { font-size: 23px; padding-left: 5px; } a.scroll_for_more { position: absolute; right: 25px; bottom: 10%; z-index: 99999; text-align: center; display: inline-block; width: 64px; height: 80px; color: #fff; background: #000 url(../images/scroll_more_arr.png) no-repeat center 50px; font-family: 'marvelbold'; font-size: 13px; line-height: 13px; text-transform: uppercase; padding: 13px 6px 0; border-radius: 10px; } .ri-grid { margin: 0 auto 0; position: relative; height: auto; } .ri-grid ul { list-style: none; display: block; width: 100%; margin: 0; padding: 0; } /* Clear floats by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .ri-grid ul:before, .ri-grid ul:after { content: ''; display: table; } .ri-grid ul:after { clear: both; } /*.ri-grid ul { zoom: 1; }*/ .ri-grid ul li { -webkit-perspective: 400px; -moz-perspective: 400px; -o-perspective: 400px; -ms-perspective: 400px; perspective: 400px; margin: 0; padding: 0; float: left; position: relative; display: block; overflow: hidden; background: #000; } .ri-grid ul li a { display: block; outline: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; background-color: #333; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } /* Grid wrapper sizes */ .ri-grid-size-1 { width: 55%; } .ri-grid-size-2 { width: 100%; } .ri-grid-size-3 { width: 100%; margin-top: 0px; } /* Shadow style */ .ri-shadow:after, .ri-shadow:before { content: ""; position: absolute; z-index: -2; bottom: 15px; left: 10px; width: 50%; height: 20%; max-width: 300px; max-height: 100px; box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); } .ri-shadow:after { right: 10px; left: auto; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); } .ri-grid-loading:after, .ri-grid-loading:before { display: none; } .ri-loading-image { display: none; } .ri-grid-loading .ri-loading-image { position: relative; width: 30px; height: 30px; left: 50%; margin: 100px 0 0 -15px; display: block; } /********************************************Bodycontent Css******************************************************************/ .bodycontent { float: left; width: 100%; position: relative; background: url(../images/body_bg2.png) no-repeat center bottom; background-size: 100% 600px; } /********************************************Navigation Css******************************************************************/ .navigation { float: left; width: 100%; background: #272727; box-shadow: 2px 0 2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 2px 0 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 2px 0 2px rgba(0, 0, 0, 0.3); padding: 7px 0; } .navigation.fixed { position: fixed; z-index: 99999; left: 0; top: 60px; } .navigation ul.menu { list-style: none; text-align: center; position: relative; } ul.menu li { list-style: none; display: inline-block; padding: 0 12px 0 19px; font-family: 'robotolight_italic'; text-transform: uppercase; background: url(../images/white_dot.png) no-repeat left center; } ul.menu li:first-child { background: none; padding-left: 0; } ul.menu li:last-child { padding-right: 0; } ul.menu li a { font-size: 20px; line-height: 31px; color: #fff; letter-spacing: 1px; } ul.menu li.active a, ul.menu li a:hover { color: #e4ba2c; } /********************************************Sections Css******************************************************************/ .col_1 { float: left; width: 100%; margin: 0; padding: 45px 0; text-align: center; } /*.col_1 > .theplayer object{ width:100% !important;}*/ .theplayer { position: relative; height: 0; width: 100%; padding-bottom: 56.25%; } .BrightcoveExperience { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .intro_sec { float: left; width: 100%; text-align: center; padding: 35px 0 0; } .intro_sec h3 { font-family: 'robotobold_italic'; font-size: 45px; line-height: 49px; color: #fff; text-transform: uppercase; letter-spacing: 3px; padding: 0 0 20px; } .intro_sec p { font-size: 17px; line-height: 23px; color: #b0b0b0; letter-spacing: 1px; padding: 0 13% 20px; } /***************************** Expert Section Css ********************************/ .expert_sec { float: left; width: 100%; text-align: center; padding: 0 0 50px; } .expert_sec .expert_row { float: left; width: 100%; } .expert_row .expert_col { display: inline-block; width: 269px; margin: 30px 15px 30px; vertical-align: top; position: relative; padding-bottom: 75px; min-height: 441px; } .expert_row .expert_col figure { float: left; width: 100%; min-height: 269px; margin: 0 0 15px; background-size: cover !important; } .expert_row .expert_col span.expert_name { display: block; width: 100%; color: #fff; font-family: 'robotomedium'; font-size: 22px; line-height: 26px; text-transform: uppercase; padding: 0 0 7px; letter-spacing: 1px; clear: both; } .expert_row .expert_col p { font-family: 'robotolight_italic'; font-size: 14px; line-height: 150%; padding: 0 0 10px; text-transform: uppercase; letter-spacing: 1px; color: #b0b0b0; clear: both; } .expert_row .expert_col ul { list-style: none; position: absolute; left: 0; bottom: 32px; width: 100%; } .expert_row .expert_col ul li { display: inline-block; margin: 0 5px; vertical-align: top; } .expert_row .expert_col ul li:first-child { margin-left: 0; } .expert_row .expert_col ul li:last-child { margin-right: 0; } .expert_row .expert_col ul li a { display: block; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; opacity: 1; } .expert_row .expert_col ul li a:hover { opacity: 0.7; } .expert_row .expert_col ul li a img { vertical-align: top; } .expert_row .expert_col span.photo_credit { font-family: 'helveticaregular'; font-size: 11px; line-height: 15px; color: #a5a5a5; position: absolute; left: 0; bottom: 0; width: 100%; } /***************************** Detail Section Css ********************************/ .inner_content { float: none; display: inline-block; vertical-align: top; width: 100%; max-width: 970px; text-align: left; } .desc_sec { float: left; width: 100%; } .desc_sec .serial { float: left; width: 170px; font-size: 180px; line-height: 180px; font-family: 'robotothin_italic'; color: #fff; border-bottom: 5px solid #e4ba2c; letter-spacing: -10px; padding: 0 0 4px; text-align:center } .desc_sec .details { float: right; width: 770px; } .desc_sec .details .heading_bar { float: left; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.5); margin-bottom: 10px; padding: 25px 0 0; min-height:70px } .desc_sec .details h3 { color: #e4ba2c; display: inline-block; font-family: "robotolight_italic"; font-size: 42px; letter-spacing: 1px; line-height: 26px; max-width: 85%; padding: 0 0 8px; } .desc_sec .details h3 span { display: inline-block; font-family: 'robotoitalic'; font-size: 20px; line-height: 20px; text-transform: uppercase; color: #c5c5c5; } .desc_sec .details ul.social { float: right; list-style: none; margin-top: 5px; } .desc_sec .details ul.social li { list-style: none; display: inline-block; margin-left: 5px; } .desc_sec .details ul.social li a { display: block; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; opacity: 1; } .desc_sec .details ul.social li a:hover { opacity: 0.7; } .desc_sec .details ul.social li a img { width: 26px; vertical-align: top; } .expert_col ul.social li a img { vertical-align: top; width: 32px; } .desc_sec .details p { font-family: 'robotolight_italic'; letter-spacing: 1px; } .media_sec { float: left; width: 100%; padding: 40px 0 0; } .media_sec figure { float: left; width: 100%; } .media_sec figure img { vertical-align: top; max-height: 100%; } .media_sec figure span.photo_credit { display: block; text-align: right; font-family: 'helveticaregular'; font-size: 11px; line-height: 15px; color: #a0a0a0; padding-top: 5px; } .media_sec .left_col { float: left; width: 470px; padding-bottom: 18px; } .media_sec .left_col.full_width { width: 100%; } .media_sec .left_col.full_width img{ width: 100%; } .media_sec .right_col { float: right; width: 470px; background:url(../images/loading.gif) no-repeat center center; min-height:100px; } /***************************** Bottom Content Css ********************************/ .bottom_content { float: left; width: 765px; max-width: 100%; border-top: 5px solid #e4ba2c; text-align: left; padding: 30px 0 0; } .bottom_content h3 { font-family: 'robotothin_italic'; font-size: 70px; line-height: 70px; color: #fff; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 10px; } .bottom_content h4 { font-family: 'robotothin_italic'; font-size: 48px; line-height: 48px; color: #fff; text-transform: uppercase; letter-spacing: 1px; padding-bottom: 10px; } .bottom_content ul { list-style: none; padding: 0 0 25px; } .bottom_content ul li { display: inline-block; font-family: 'robotothin_italic'; color: #fff; padding: 0; margin: 0 45px 0 0; } .bottom_content ul li a { display: block; font-size: 90px; line-height: 90px; color: #fff; letter-spacing: 1px; background: url(../images/yellow_arrow.png) no-repeat right center; padding: 0 55px 0 0; } .bottom_content ul li a:hover { color: #e4ba2c; } .bottom_content p { font-size: 17px; line-height: 23px; color: #b0b0b0; letter-spacing: 1px; } /***************************** Seperator Section Css ********************************/ .seperator_sec { float: left; width: 100%; text-align: center; border-top: 2px solid rgba(70, 70, 70, 0.5); border-bottom: 2px solid rgba(70, 70, 70, 0.5); padding: 12px 0 15px; } .seperator_sec a { display: inline-block; } .seperator_sec img { display: block; float: none; margin: 0 auto; padding: 0; position: relative; text-align: center; width: auto; } /*.col_1 .seperator_sec{ margin-top:35px;}*/ footer { float: left; width: 100%; text-align: center; background: #000; padding: 25px 0 25px; } footer a.logo { display: inline-block; width: auto; margin-bottom: 15px; } footer a.logo img { vertical-align: top } footer p { font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 15px; color: #fff; padding: 0; } footer a { color: #999999; } footer p span { color: #999999; } footer p img { vertical-align: middle; } a.back_to_top { background: #e4ba2c none repeat scroll 0 0; border-radius: 50%; bottom: 30px; cursor: pointer; display: none; height: 34px; position: fixed; right: 15px; width: 34px; z-index: 999; opacity: 0.8; } a.back_to_top:after { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; border-color: transparent transparent #fff; border-image: none; border-style: solid; border-width: 10px; content: ""; height: 0; left: 50%; margin: -15px 0 0 -10px; position: absolute; top: 50%; width: 0; } html { -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */ }