/****************************** MAIN STYLES - backgorund,deviders ******************************/ /* Main Container */ img, embed, object, video { max-width: 100% } /* Deviders */ div.line { height: 6px; background:url(../images/separator.png) 0 0 no-repeat; border-top:2px solid #cfa0d1; display: block; margin:0; } div.sepContainer { height: 4px; background:#e1e8ed; border-left:20px solid #bfd6e4; display: block; margin: 20px 0; } div.sepContainer1 { height: 4px; background:#e1e8ed; border-left:20px solid #bfd6e4; display: block; margin: 10px 0 30px 0; } div.sepContainer2 { height: 4px; background:#e1e8ed; border-left:20px solid #bfd6e4; display: block; margin: 5px 0; } div.blankSeparator { height: 1px; margin:20px 0; display: block; } div.blankSeparator1 { height: 1px; margin:25px 0; display: block; } div.blankSeparator2 { height: 1px; margin:10px 0; display: block; } .tip-twitter { z-index:1000; text-align:left; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; padding:8px 8px; max-width:200px; color:#fff; background-color: #8098a6; font-family: Arial, Helvetica, sans-serif; } .tip-twitter .tip-inner { font:12px/16px Arial, Helvetica, sans-serif; } /****************************** HOME - Content Part - Logo&Menu ******************************/ /* Header - Logo & Menu */ #header { background:#bfd6e4; margin-top:0px; border-bottom:1px solid #6d8696; } .logo { float: left; margin-right: 2px; margin-top:15px; margin-bottom:10px; } .mainmenu { float:right; } ul.sf-menu { margin-top:0px; } /*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { line-height: 1.0; } .sf-menu ul { position: absolute; top: -999em; width: 10em; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float: left; position: relative; } .sf-menu a { display: block; position: relative; } .sf-menu li:hover ul, .sf-menu li.sfHover ul { left: 0; top: 2.5em; /* match top ul list item height */ z-index: 99; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 10em; /* match ul width */ top: 0; } .sf-menu { position: relative; float: right; line-height: 12px; margin: 0; z-index: 99; } .sf-menu li { background:transparent; border-top:2px solid transparent; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .sf-menu li:hover { /* visited pseudo selector so IE6 applies text colour*/ background: rgba(215, 234, 238, 0.3); border-top:2px solid #fff; } .sf-menu li a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; padding:45px 15px 45px 15px; text-decoration:none; text-transform:uppercase; font-weight:600; color: #414558; } li a#visited { background: rgba(215, 234, 238, 0.3); } /*** submenu ***/ .sf-menu li ul { border-bottom:5px solid #bfd6e4; margin-top:75px; } .sf-menu ul li { /* visited pseudo selector so IE6 applies text colour*/ border-top:none; } .sf-menu ul li:hover { /* visited pseudo selector so IE6 applies text colour*/ border-top:none; } .sf-menu li ul li a { padding:15px 0 15px 0; text-decoration:none; color:#fff; background:#727888; color: #fff; border: 0; padding:15px; font-weight: normal; font-size: 11px; text-transform:lowercase; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .sf-menu li ul li a:hover { padding-left: 18px; } .sf-menu li li { border-bottom:1px solid #606573; } /* apply hovers to modern browsers */ a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position: -10px -100px; /* arrow hovers for modern browsers*/ } /* point right for anchors in subs */ .sf-menu ul .sf-sub-indicator { background-position:-10px 0; } .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } /* apply hovers to modern browsers */ .sf-menu ul a:focus > .sf-sub-indicator, .sf-menu ul a:hover > .sf-sub-indicator, .sf-menu ul a:active > .sf-sub-indicator, .sf-menu ul li:hover > a > .sf-sub-indicator, .sf-menu ul li.sfHover > a > .sf-sub-indicator { background-position: -10px 0; /* arrow hovers for modern browsers*/ } span.home { margin-right:10px; } /****************************** HOME - Content Part - FlexSlider ******************************/ /* * jQuery FlexSlider v1.8 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php */ /* Browser Resets */ .flex-container a, .flexslider a, .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; } /* FlexSlider Necessary Styles *********************************/ .flexslider { margin: 0px 0 0 0; padding: 0; background:#fff; border-top:1px solid #efefef; border-bottom:5px solid #89a2b2; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img { display: block; } .flex-pauseplay span { text-transform: capitalize; } /* Clearfix for the .slides element */ .slides:after { content: "."; 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 { position: relative; zoom: 1; } .flexslider .slides { zoom: 1; } .flexslider .slides > li { position: relative; } /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */ .flex-container { zoom: 1; position: relative; } /* Caption style */ /* IE rgba() hack */ .flex-caption { zoom: 1; width: 20%; padding: 2%; margin: 0; position: absolute; left: 0; bottom: 0; background:#bfd6e4; color:#414558; font-size: 12px; line-height: 15px; } /* Direction Nav */ .flex-direction-nav { height: 0; } .flex-direction-nav a { width:52px; height: 52px; margin: -15px 0 0; display: block; background: url(../images/flexslider/bg_direction_nav.png) no-repeat; position: absolute; top: 50%; cursor: pointer; text-indent: -999em; } .flex-direction-nav .flex-next { background-position: -52px 0; right: 0px; } .flex-direction-nav .flex-prev { left: 0px; } .flex-direction-nav .flex-disabled { opacity: .3; filter:alpha(opacity=30); cursor: default; } /* Control Nav */ .flex-control-nav { width: 100%; position: absolute; bottom: -30px; text-align: center; } .flex-control-nav li { margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline; } .flex-control-nav li:first-child { margin: 0; } .flex-control-nav a { width: 13px; height: 13px; display: block; cursor: pointer; text-indent: -999em; } .flex-control-nav a:hover { background-position: 0 -13px; } .flex-control-nav a.flex-active { background-position: 0 -26px; cursor: default; } /****************************** HOME - Content Part - Box One ******************************/ .info a { color:#89a2b2; margin-left:0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor:pointer; } .info a:hover { margin-left:4px; color:#738a99; } span.red { color:#c45d69; } span.green { color:#61bd68; } /****************************** HOME - Content Part - Box Two ******************************/ .quote { text-align:center; padding:0px 0 10px 0; } .quote h3 { font-style:italic; font-weight:bold; } .quote h4 { margin-bottom:-10px; } .clients img { border-bottom:6px solid #efefef; opacity: 0.5; filter: alpha(opacity=50); -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; transition: opacity 0.5s linear; cursor:pointer; } .clients img:hover { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; -ms-transition: opacity 1s linear; transition: opacity 1s linear; } /****************************** HOME - Content Part - Box Three ******************************/ .boxthree .one_third { background:#e1e8ed; box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1), 1px -1px 0px #efefef; border-bottom:3px solid transparent; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .boxthree .one_third:hover { border-bottom:3px solid #c45d69; } .boxthreeleft, .boxthreecenter, .boxthreeright { padding:20px 20px 15px 20px; } .boxthree img { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; transition: opacity 0.5s linear; } .boxthree img:hover { opacity: 0.7; filter: alpha(opacity=70); -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; -ms-transition: opacity 1s linear; transition: opacity 1s linear; } .boxthree h3 { border-bottom:1px solid #d2dbe2; } a.simple { color:#c45d69; font-size:11px; } /****************************** HOME - Content Part - Footer ******************************/ #footer { background:#626879; padding:20px 0px; border-top:5px solid #bfd6e4; } .footer p { color:white; } .footer h3 { color:#019cccs; } #tweets li { line-height: 1.5em; color:#efefef; } #tweets li a { color:#bfd6e4; } #tweets p.meta { color:#bfd6e4; margin-top:10px; } #tweets li.tweet_content_0 { border-top:0px none; list-style:none; } #tweets li:last-child { border-bottom:0px none; } #tweets .hash { color:#efefef; } #tweets .reply { color:#efefef; } .footer ul li { color:#f1f2f2; border-top:1px solid #787f94; border-bottom:1px solid #494d5a; padding:5px 0; } .footer ul li:last-child { border-bottom:none; } .footer ul li:first-child { border-top:none; } .footer ul li a { color:white; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; cursor:pointer; } .footer ul li a:hover { color:#bfd6e4; padding-left:5px; } /****************************** HOME - Content Part - Copyright ******************************/ #copyright { background:#727888; border-top:1px solid #414550; border-bottom:5px solid #5c616f; } p.copyright { font-size:12px; color:white; padding-top:10px; } p.copyright a { color:#bfd6e4; } ul.socials { margin-top:10px; /*float:right;*/ } ul.socials li { display:inline; } /****************************** ABOUT - Content Part ******************************/ .aboutoneleft p.quote, .aboutonecenter p.quote { color:#647884; font-style:italic; font-weight:bold; font-size:11px; } .aboutoneleft img.raster, .aboutonecenter img.raster { float:left; margin-right:10px; margin-top:2px; } .aboutoneright img { border-bottom:5px solid #bccfdb; } /* TOGGLE -------------------------------------------------*/ .toggle-trigger { text-decoration: none; color: #414550; font-weight: bold; padding: 10px 10px 10px 25px; cursor: pointer; border: 1px solid #b7c7d1; background: #dae4ea url(../images/about/toggle.png) no-repeat 5px 10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .toggle-trigger.active { border-bottom:1px solid #b7c7d1; background:#bfd6e4 url(../images/about/toggle.png) no-repeat 5px -75px; } .toggle-trigger:hover { background-color:#bfd6e4; } .toggle-container { margin-bottom: 0px; padding: 5px 10px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; } /***************** PORTFOLIO / Pagination*****************/ .portfolio .flexslider { margin: 0px 0 30px 0; padding: 5px; background:#fff; border:1px solid #efefef; } .portfolio h2 { border-bottom:1px dashed #cdcdcd; padding:0px 0 5px 0; } .portfolio h4 { font-style:italic; font-size:13px; } p.portfolio { margin-top:25px; background:#fff; border:1px solid #efefef; padding:5px; } ul.pagination { padding:22px 0px 10px 0px; } ul.pagination li { display: inline; } ul.pagination li a { background-color:white; border:#efefef solid 1px; color: #414550; font-weight:bold; width:80px; height:80px; padding:9px 13px; margin-right:5px; /* CSS3 Transition */ transition: background-color 0.5s ease-in-out; -moz-transition: background-color 0.5s ease-in-out; -webkit-transition: background-color 0.5s ease-in-out; cursor:pointer; } ul.pagination li a:hover, ul.pagination li a#currentPage { text-decoration: none; background-color: #bfd6e4; color: white; } /****************************** Gallery ******************************/ .portfolio4columns .one_fourth { margin-bottom:10px; background: #fff; box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1), 1px -1px 0px #efefef; border-bottom:2px solid transparent; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio4columns .one_fourth:hover { border-bottom:2px solid #bfd6e4; } .boxfour { padding:10px 10px 4px 10px; } .portfolio4columns img { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; transition: opacity 0.5s linear; } .portfolio4columns img:hover { opacity: 0.9; filter: alpha(opacity=90); -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; -ms-transition: opacity 1s linear; transition: opacity 1s linear; } /* #Tabs (activate in tabs.js) ================================================== */ ul.tabs { display: block; margin: 0 0 20px 0; background:#727888; } ul.tabs li { width: auto; height: 18px; padding: 10px 0px; float: left; margin-bottom: 0; } ul.tabs li a { text-decoration: none; width: auto; border-right:1px solid #fff; padding:0 20px; line-height: 10px; margin: 0; color:#bfd6e4; font-size: 16px; } ul.tabs li a.active { background:#7cbaca; padding:5px 20px; position: relative; top: 0px; margin: 0 0 0 0px; color: #fff; } ul.tabs li:first-child a.active { margin-left: 0; } ul.tabs-content { margin: 0; display: block; color:#efefef; } ul.tabs-content > li { display:none; } ul.tabs-content > li.active { display: block; } /* Clearfixing tabs for beautiful stacking */ ul.tabs:before, ul.tabs:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } ul.tabs:after { clear: both; } ul.tabs { zoom: 1; } li#beauty, li#woman, li#people { -webkit-animation: slideLeft 0.5s ease-in-out forwards; -moz-animation: slideLeft 0.5s ease-in-out; -o-animation: slideLeft 0.5s ease-in-out; -ms-animation: slideLeft 0.5s ease-in-out; animation: slideLeft 0.5s ease-in-out; } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(-20%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-moz-keyframes slideLeft { 0% { -moz-transform: translateX(-20%); opacity: 0; } 100% { -moz-transform: translateX(0px); opacity: 1; } } @-o-keyframes slideLeft { 0% { -o-transform: translateX(-20%); opacity: 0; } 100% { -o-transform: translateX(0px); opacity: 1; } } @-ms-keyframes slideLeft { 0% { -ms-transform: translateX(-20%); opacity: 0; } 100% { -ms-transform: translateX(0px); opacity: 1; } } @keyframes slideLeft { 0% { transform: translateX(-20%); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } /****************************** BLOG - Content Part - Blog Page ******************************/ .post { margin-bottom:40px; padding:10px; background:#fff; border:1px solid #efefef; opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; transition: opacity 0.5s linear; } .blog img { background:#bfd6e4; padding:10px; margin-left:-10px; margin-bottom:10px; } .blog img:hover { opacity: 0.7; filter: alpha(opacity=70); -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; -ms-transition: opacity 1s linear; transition: opacity 1s linear; } .blog p.meta { font-size:11px; margin-bottom:10px; margin-top:0px; border:1px solid #dcdcdc; background:#efefef url(../images/blog.png) 97% center no-repeat; padding:5px 0px 20px 10px; color:#414550; } .blog p.meta a { color: #5f637a; } span.left { padding:0 10px; border-right:1px solid #fff; } .blog h4 { font-style:italic; font-size:12px; text-transform:capitalize; margin-top:-10px; } .posttwo { margin-top:40px; } /***************** Blog/Sidebar *****************/ .sidebar h3 { background:#bfd6e4; border:1px solid #fff; padding:5px; } ul.blogList a.about { color: #414558; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } ul.blogList a.about:hover { padding-left:3px; } ul.blogList li { padding: 10px 20px; border-bottom:1px solid #fff; background: url(../images/raster.png) left no-repeat; } li.activenavigationItem { font-weight: bold; color: #8990a3; font-style:italic; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } li.activenavigationItem:hover { color: #414558; } .second, .third { margin-top:30px; } .third h5 { text-transform:uppercase; font-size:12px; } span.color { background:#c45d69; color:#fff; padding:5px; font-weight:bold; } /******************************* BLOG / Blogpost *******************************/ .postone { margin-bottom:40px; padding:10px; background:#fff; border:1px solid #efefef; opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.5s linear; -moz-transition: opacity 0.5s linear; -o-transition: opacity 0.5s linear; -ms-transition: opacity 0.5s linear; transition: opacity 0.5s linear; } .singleblog img { background:#bfd6e4; padding:10px; margin-left:-10px; margin-bottom:10px; } .singleblog img:hover { opacity: 0.7; filter: alpha(opacity=70); -webkit-transition: opacity 1s linear; -moz-transition: opacity 1s linear; -o-transition: opacity 1s linear; -ms-transition: opacity 1s linear; transition: opacity 1s linear; } .singleblog p.meta { font-size:11px; margin-bottom:10px; margin-top:0px; border:1px solid #dcdcdc; background:#efefef url(../images/blog.png) 97% center no-repeat; padding:5px 0px 20px 10px; color:#414550; } .singleblog p.meta a { color: #5f637a; } .singleblog h4 { color:#6d8696; font-style:italic; font-weight:bold; font-size:11px; border-left:2px solid #c45d69; padding:0 0 0 10px; } h4.tags { color:#414550; } .comments h2 { text-align:center; } div#comments { margin-bottom:-10px; } ul#articleCommentList li { overflow: hidden; } ul#articleCommentList li ul { margin-left: 50px; } div.commentMeta { width: 100px; margin-right: 40px; float: left; text-align: right; overflow: hidden; } div.commentMeta p { text-transform: uppercase; color: #414550; float: right; font-size: 14px; margin-top:0px; padding: 0 10px 0 0; } img.user { background:#fff; border:1px solid #dcdcdc; padding:5px; } div.commentBody { background-color:white; box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); padding: 30px 15px 20px 15px; margin: 0px 0 20px 140px; } div.commentBody h3 { background-color:#bfd6e4; padding:5px; font-size: 14px; margin-top:-10px; font-weight:bold; margin-bottom:10px; } div.commentBody h3 a { color: #414550; } div.commentBody p { font-size: 12px; } span.adminIcon { color:#414550; font-size: 11px; background-color:#bfd6e4; padding: 6px 10px; width: 60px; text-align: center; margin-top:-10px; } h2#commentFormHeading { margin: 0px 0 30px 0; } div#comments a.buttonLink { margin-left:-30px; } /******************************* FEATURES / Resume *******************************/ .resume { margin-top:30px; } .resume .one_third { background:#bfd6e4; border-bottom:2px solid #fff; } .resume .one_third h3 { padding:10px; } .resume .two_third { background:#fff; } .resume .two_third p { padding:10px; } .resume .two_third h4 { padding:10px; } .resume .two_third ul { padding:10px; margin-top:-20px; } .resume .two_third ul li { color:#8295a0; } .resume img { margin-bottom:-30px; } /******************************* CONTACT FORM - for blog and contact page *******************************/ #contactForm h2 { margin-top:40px; } form#contact_form { background-color:white; box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); color:#414550; } form#contact_form .name { padding:30px 0px 0 20px; } form#contact_form .email { padding-left:20px; padding-top:10px; } form#contact_form p { margin-bottom:10px; padding-top:5px; font-style:italic; } form#contact_form .message { padding-left:20px; padding-top:10px; } div#loader { margin-left: 20px; margin-bottom:30px; } form#contact_form input[type="text"] { border: 1px solid #e1e5e9; background-color: white; height: 30px; padding: 0 10px; width: 250px; margin-bottom:20px; } form#contact_form input#email { border: 1px solid #e1e5e9; background-color: white; height: 30px; padding: 0 10px; width: 250px; margin-bottom:20px; } form#contact_form textarea { border: 1px solid #e1e5e9; background-color: white; width: 500px; margin-bottom:20px; } form#contact_form label { margin-right: 20px; font-size: 12px; font-weight:bold; color: #414550; text-transform: uppercase; } form#contact_form label span { color: #414550; } form#contact_form input[type="text"]:focus, form#contact_form input[type="text"]:hover, form#contact_form textarea:focus, form#contact_form textarea:hover, form#contact_form input[type="text"]:focus, form#contact_form input[type="text"]:hover, form#contact_form textarea:focus, form#contact_form textarea:hover { background-color:#efefef; } form#contact_form input[type="submit"] { background: #414550; border:none; padding:5px; font-size:11px; text-transform:uppercase; color:white; margin-bottom:10px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } form#contact_form input[type="submit"]:hover { color:#bfd6e4; } .map-container { position: relative; padding-bottom: 20%; overflow: hidden; border-bottom:5px solid #fff; } .map-container iframe, .map-container object, .map-container embed { position: absolute; top: 0; left: 0; width: 100%; height:100%; } .contact1 { margin-top:-40px; } /***************** Contact/Sidebar *****************/ .contactsidebar h3 { background:#bfd6e4; border:1px solid #fff; padding:5px; margin-left:6%; } ul.contactsidebarList a.about { color: #414558; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } ul.contactsidebarList a.about:hover { padding-left:3px; } ul.contactsidebarList li { color:#414558; padding: 10px 20px; margin-left: 4%; border-bottom:1px solid #fff; background image:raster.png ; left no-repeat; } .second, .third { margin-top:30px; } .third h5 { margin-left:6%; text-transform:uppercase; font-size:12px; } span.color { background:#c45d69;S color:#fff; padding:5px; margin-left:6%; font-weight:bold; } /****************************** Shortcodes ******************************/ /* Content Shortcodes */ .one_half { width: 48%; } .one_third { width: 30.66%; } .two_third { width: 65.33%; } .one_fourth { width: 22%; } .one_fifth { width: 16.8%; } .one_sixth { width: 15%; } .one_half, .one_third, .two_third, .one_fourth, .one_fifth { margin-right: 4%; margin-bottom: 10px; float: left; } .one_sixth { margin-right: 2%; margin-bottom:20px; float: left; } .lastcolumn { margin-right: 0!important; clear: right; } /* #Page Styles ================================================== */ .content { padding-top: 20px; } .content.right { float: right; } /* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) { } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { .sf-menu li a { padding:45px 10px 45px 10px; } .flex-caption { display:none; } span.left { padding:0 5px; } .blog p.meta, .singleblog p.meta { background:#efefef; } form#contact_form textarea { width: 350px; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { .mainmenu { float: left; width: 100%; margin-top:-230px; } .one_half, .one_third, .two_third, .one_fourth, .one_fifth, .one_sixth { width: 100%; } .flex-caption { display:none; } .blog p.meta, .singleblog p.meta { padding:20px 0px 50px 10px; background:#efefef; } form#contact_form textarea { width: 300px; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { ul.tabs { margin-top:20px; } .flex-caption { display:none; } form#contact_form textarea { width: 300px; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { ul.tabs { margin-top:20px; } ul.tabs li { padding: 0 5px 0 0px; } .mainmenu { float: left; width: 100%; margin-top:-340px; } ul.pagination li a { padding:5px 8px; } .blog p.meta, .singleblog p.meta { padding:10px 0px 60px 10px; background:#efefef; } form#contact_form textarea { width: 200px; } form#contact_form input[type="text"] { width: 150px; } form#contact_form input#email { width: 150px; } ul.tabs li { padding:10px 0px; } ul.tabs li a { padding:0px 10px; line-height: 10px; } } /* Responsive Menu ================================================== */ #mainmenu { visibility: visible; } #responsive-menu { display: none; float: left; } @media only screen and (max-width: 767px) { #mainmenu { visibility: hidden; height: 0; } #responsive-menu { display: inline-block; width: 100%; margin-top: 13px; } }