/*/* Theme Name: Vissit Theme 3 Theme URI: http://www.vissit.com Description: Responsive theme for vissit.com Author: Jaime Fernandez Author URI: http://www.vissit.com Version: 3.0 */ /* Paragridma Framework */ 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:inherit;vertical-align:baseline}html{font-size:62.5%}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}body{background:#fff;position:relative;-webkit-font-smoothing:antialiased}body,input,select,textarea,button{font-family:Arial,"Lucida Grande",sans-serif;font-size:13px;line-height:18px;color:#555}a{color:#2a85e8;text-decoration:none;outline:0;line-height:inherit}a:hover{color:#11639d}p a,p a:visited{line-height:inherit}img,object{max-width:100%}ul,ol{margin-bottom:18px}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,ol ol{margin:4px 0 5px 30px}li{margin-bottom:12px}ul.horizontal li{float:left}ul.nm{margin:0}table{background:#fff;width:100%;margin:0 0 18px;border:1px solid #ddd}table thead{background:#f5f5f5}table thead tr th,table tbody tr td{text-align:left}table thead tr th{padding:8px 10px 9px;font-weight:bold}table thead tr th:first-child{border-left:none}table thead tr th:last-child{border-right:none}table thead tr{}table tbody{}table tbody tr{}table tbody tr.even,table tbody tr.alt,table tbody tr:nth-child(even){background:#f9f9f9}table tbody tr td{padding:9px 10px;vertical-align:top;border:none}.h1,.h2,.h3,.h4,.h5,.h6{font-weight:bold;line-height:1.25;clear:both}.h1 a,.h2 a,.h3 a,.h4 a,.h5 a,.h6 a{font-weight:inherit}.h1{font-size:46px;font-size:4.6rem;margin-bottom:12px}.h2{font-size:35px;font-size:3.5rem;margin-bottom:9px}.h3{font-size:28px;font-size:2.8rem;margin-bottom:9px}.h4{font-size:21px;font-size:2.1rem;margin-bottom:3px}.h5{font-size:18px;font-size:1.8rem;font-weight:normal;margin-bottom:3px}.h6{font-size:15px;font-size:1.5rem;font-weight:normal}.subheader{color:#777;font-weight:300;margin-bottom:24px}p{line-height:17px;margin:0 0 18px}p img{margin:0}p.lead{font-size:18px;font-size:1.8rem;line-height:24px} /*@media handheld,only screen and (max-width:767px){ body,p{ font-size:15px;font-size:1.5rem;line-height:1.4 } }*/ em{font-style:italic;line-height:inherit}strong{font-weight:bold;line-height:inherit}small{font-size:60%;line-height:inherit}h1 small,h2 small,h3 small,h4 small,h5 small{color:#777}code,pre{background:#FCF8C4;font-family:Monaco,Andale Mono,Courier New,monospace;padding:0 3px}pre{overflow:auto}pre{border:solid 1px #ccc;margin-bottom:18px}blockquote,blockquote p{line-height:20px}blockquote{margin:0 0 18px;padding:9px 20px 0 19px;border-left:1px solid #ddd}blockquote cite{display:block;font-size:12px;font-size:1.2rem}blockquote cite:before{content:"\2014 \0020"}blockquote cite a,blockquote cite a:visited{}hr{border:solid #ddd;border-width:1px 0 0;clear:both;margin:12px 0 18px;height:0}abbr,acronym{text-transform:uppercase;font-size:90%; border-bottom:1px solid #ddd;cursor:help}abbr{text-transform:none}@media print{ *{background:transparent !important; text-shadow:none !important;filter:none !important; -ms-filter:none !important} p a,p a:visited{ text-decoration:underline} p a[href]:after{content:"("attr(href) ")"} abbr[title]:after{content:"("attr(title) ")"} .ir a:after,a[href^="javascript:"]:after,a[href^="#"]:after{content:""} pre,blockquote{border:1px solid #999;page-break-inside:avoid} thead{display:table-header-group} tr,img{page-break-inside:avoid} @page{margin:0.5cm} p,h2,h3{orphans:3;widows:3} h2,h3{page-break-after:avoid}}.container,.fixContainer{padding:0px 20px} .row{width:100%;margin:0 auto} .row .row{min-width:0px} .g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12 {margin-left:4.4%;float:left;min-height:1px;position:relative} .g1:first-child, .g2:first-child, .g3:first-child, .g4:first-child, .g5:first-child, .g6:first-child, .g7:first-child, .g8:first-child, .g9:first-child, .g10:first-child, .g11:first-child, .g12:first-child, .g1.first, .g2.first, .g3.first, .g4.first, .g5.first, .g6.first, .g7.first, .g8.first, .g9.first, .g10.first, .g11.first, .g12.first{margin-left:0px} .row .g1{width:4.3%}.row .g2{width:13%}.row .g3{width:21.68%}.row .g4{width:30.4%}.row .g5{width:39.1%}.row .g6{width:47.8%}.row .g7{width:56.5%}.row .g8{width:65.2%}.row .g9{width:73.9%}.row .g10{width:82.6%}.row .g11{width:91.3%}.row .g12{width:100%}.row .g1.centered{margin-left:47.9%}.row .g2.centered{margin-left:43.5%}.row .g3.centered{margin-left:39.2%}.row .g4.centered{margin-left:34.8%}.row .g5.centered{margin-left:30.5%}.row .g6.centered{margin-left:26.1%}.row .g7.centered{margin-left:21.8%}.row .g8.centered{margin-left:17.4%}.row .g9.centered{margin-left:13.1%}.row .g10.centered{margin-left:8.7%}.row .g11.centered{margin-left:4.3%}img,object,embed{max-width:100%}img{-ms-interpolation-mode:bicubic} .row:before,.row:after,.clearfix:before,.clearfix:after{content:"";display:table} .row:after,.clearfix:after{clear:both} .row,.clearfix{zoom:1}.pf:after,.pf_r:after{clear:both}.pf >.pf_fix{float:left}.pf_r >.pf_fix{float:right}.pf_g55 >.pf_fix{width:55px}.pf_g55 >.pf_fluid{margin-left:55px}.pf_g100 >.pf_fix{width:100px}.pf_g100 >.pf_fluid{margin-left:100px}.pf_r.pf_g100 >.pf_fluid{margin-right:100px;margin-left:0}.pf_g80 >.pf_fix{width:80px}.pf_g80 >.pf_fluid{margin-left:80px}.pf_r.pf_g80 >.pf_fluid{margin-right:80px;margin-left:0}.pf_g160 > .pf_fix { width:160px; } .pf_g160 > .pf_fluid { margin-left:160px; } .pf_r.pf_g160 > .pf_fluid { margin-right:160px; margin-left:0; }.pf_g200 >.pf_fix{width:200px}.pf_g200 >.pf_fluid{margin-left:200px}.pf_r.pf_g200 >.pf_fluid{margin-right:200px;margin-left:0}.pf_g250 >.pf_fix{width:250px}.pf_g250 >.pf_fluid{margin-left:250px}.pf_r.pf_g250 >.pf_fluid{margin-right:250px;margin-left:0}.pf_g300 >.pf_fix{width:300px}.pf_g300 >.pf_fluid{margin-left:300px}.pf_r.pf_g300 >.pf_fluid{margin-right:300px;margin-left:0} @media only screen and (max-width:767px){.break-on-mobile.pf .pf_fix,.break-on-mobile.pf_r .pf_fix{float:none}.break-on-mobile.pf .pf_fluid,.break-on-mobile.pf_r .pf_fluid{clear:both;margin-left:0 !important;margin-right:0 !important}}.msg{border:solid 1px #ccc;margin-bottom:18px;background-color:#FDF5D9;padding:5px}.pf.msg{min-height:55px}.msg_error{background-color:#FDDFDE}.msg_info{background-color:#DDF4FB}.msg_success{background-color:#D1EED1}.msg .close{float:right}.msg_title{font-weight:bold}.msg_content{margin-bottom:0}.msg_big .pf_fix{height:50px;width:55px;background:url('../images/icons/msg_warning.png') no-repeat 2px 2px}.msg_big .pf_fluid{margin-left:60px}.msg_error .pf_fix{ background-image:url('../images/icons/msg_error.png')}.msg_info .pf_fix{background-image:url('../images/icons/msg_info.png')}.msg_success .pf_fix{background-image:url('../images/icons/msg_success.png')}.bg2,.bg3,.bg4,.bg5 {display:block;overflow:hidden}.bg2>*,.bg3>*,.bg4>*,.bg5>*{display:block;height:auto;float:left;margin-bottom:20px}.bg2{margin-left:-4%}.bg2>*{margin-left:4%;width:46%}.bg3{margin-left:-2%}.bg3>*{margin-left:2%;width:31.3%}.bg4{margin-left:-2%}.bg4>*{margin-left:2%;width:23%}.bg5{margin-left:-1.5%}.bg5>*{margin-left:1.5%;width:18.5%}@media only screen and (max-width:767px){.bg2.mobile>*,.bg3.mobile>*,.bg4.mobile>*,.bg5.mobile>*{width:98.5%}} ul.nice,ol.nice{list-style:none;margin:0} ul.nice li,ol.nice li{padding-left:30px;position:relative} ul.nice li span.bullet,ol.nice li span.number{position:absolute;left:8px;top:2px;color:#ccc;width:12px;height:12px;background-color:pink}dl dt{font-weight:bold}dd{margin-left:1.5em} div.panel{padding:20px 20px 2px 20px;border:solid 1px #ccc;margin:0 0 20px 0} /* .fg label{display:block;cursor:pointer} .fg{margin-bottom:9px}input.text,textarea{border:solid 1px #ccc;padding:0.41%}select{padding:0.41%}input.text,textarea,select{display:block}input.text,textarea{font-size:13px;padding:3px 3px 2px;outline:none !important;background:#fff}input.text.oversize,textarea.oversize{font-size:18px !important;padding:4px 5px !important}input.text:focus,textarea:focus{background:#f9f9f9}input[type=file]{ background-color:#fff; padding:initial; border:initial; line-height:initial; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; height:20px;line-height:20px}input.text:focus,textarea:focus{ outline:0; border-color:#73B8EF; -webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(82,168,236,0.6); -moz-box-shadow:inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(82,168,236,0.6); box-shadow:inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(82,168,236,0.6)}input[type=file]:focus,input.checkbox:focus,select:focus{ -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; outline:1px dotted #666}input[disabled],input.text.disabled,select[disabled],select.text.disabled,textarea[disabled],textarea.text.disabled{cursor:not-allowed;background-color:#F5F5F5;border-color:#DDD;cursor:not-allowed} .fg_error input:focus,.fg_error textarea:focus{ border-color:#b9554d; -webkit-box-shadow:0 0 6px rgba(171,41,32,0.5); -moz-box-shadow:0 0 6px rgba(171,41,32,0.5); box-shadow:0 0 6px rgba(171,41,32,0.5)}input.placeholder,textarea.placeholder{color:#d5d3d3}input::-webkit-input-placeholder {color:#d5d3d3}input:-moz-placeholder{color:#d5d3d3}input.text,textarea{width:51.5%}input.small,textarea.small{width:25%}input.large,textarea.large{width:96%}select{width:52.8%}select.small{width:26.5%}select.large{width:97.2%}form fieldset{padding:9px 9px 2px 9px;border:solid 1px #ddd;margin:18px 0} .fg input.radio,.fg input.checkbox{display:inline;width:auto;margin-bottom:0;cursor:pointer} .fg small {display:block;font-size:11px}div.fg_error input,div.fg_error textarea{border-color:red;background-color:#FFD9D9}div.fg_error select{background-color:#FFD9D9}div.fg_error label{color:#9D261D}div.fg_error.radioGroup .options,div.fg_error.checkboxGroup .options {border:solid 1px #c87872}div.fg_error.radioGroup .option label,div.fg_error.checkboxGroup .option label{color:#000}div.fg_error small{color:#9D261D} .small+small.error{width:140px} .medium+small.error{width:260px} .large+small.error{width:440px} .radioGroup .option,.checkboxGroup,.checkboxGroup .option{clear:both;min-height:20px} .radioGroup .options input.radio{clear:both;float:left;margin-top:2px} .radioGroup .options label{padding-left:5px;float:left} .checkboxGroup input.checkbox{float:left;margin-top:2px} .checkboxGroup label{padding-right:5px;float:left} .checkboxGroup input.checkbox+label{padding-left:5px;padding-right:0} .fh .fg{float:left;padding-right:5px} .fh label{float:left;padding-right:5px;padding-top:4px} .fh input.text,.fh select,.fh textarea{float:left;width:100px} .fh select{margin-top:4px} .fh .options{float:left} .fh .option{float:left;clear:none;margin-right:20px} .fh .option input.checkbox,.fh .option input.radio{margin-top:6px}@media only screen and (max-width:767px){div.form-field input,div.form-field input.small,div.form-field input.medium,div.form-field input.large,div.form-field input.oversize,input.text,input.text.oversize,textarea,select{display:block;width:96%;padding:6px 2% 4px;font-size:18px}select,select.large,select.small{width:100%;padding-left:0.41%} .bt{display:block}button.bt{width:100%;padding-left:0px;padding-right:0px}} */ /*= FORMS & BUTTONS */ /*= FORMS & BUTTONS */ .fg { margin-bottom: 1em; } .fg label { display: block; line-height: 1.2em; padding-bottom: 0.3em; } .fg label [for] { cursor: pointer; } .fg small { display: block; color: #aaaaaa; line-height: 1.3em; padding: 2.5px 0; } input:not([type=submit]):not([type=radio]):not([type=checkbox]), textarea, select, .customFileInput .fileName { display: block; border: solid 1px #cccccc; width: 100%; line-height: 1.6em; } textarea { min-height: 140px; } input:not([type=submit]):not([type=radio]):not([type=checkbox]), textarea, select, .customFileInput .fileName { padding: 5px 10px; height: 36px; } textarea { height: auto; } input:not([type=submit]):not([type=radio]):not([type=checkbox]), .customFileInput .fileName { vertical-align: middle; } input:not([type=submit]):not([type=radio]):not([type=checkbox]):focus, textarea:focus, select:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); } input:not([type=submit]):not([type=radio]):not([type=checkbox]):-moz-placeholder, textarea:-moz-placeholder { color: #aaaaaa; } input:not([type=submit]):not([type=radio]):not([type=checkbox])::-moz-placeholder, textarea::-moz-placeholder { color: #aaaaaa; } input:not([type=submit]):not([type=radio]):not([type=checkbox]):-ms-input-placeholder, textarea:-ms-input-placeholder { color: #aaaaaa; } input:not([type=submit]):not([type=radio]):not([type=checkbox])::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #aaaaaa; } input[disabled], select[disabled], textarea[disabled] { background-color: #F5F5F5; border-color: #DDDDDD; cursor: not-allowed; } .customFileInput input { opacity: 0; } /* Checkboxs & Radio buttons */ .radioGroup .option, .checkboxGroup, .checkboxGroup .option { clear: both; min-height: 20px; position: relative; } .checkboxGroup input.checkbox, .radioGroup .options input.radio { margin-top: 0.1em; position: absolute; top: 0; left: 0; } .checkboxGroup label, .radioGroup .options label { padding-right: 20px; float: left; } .checkboxGroup label + input.checkbox, .radioGroup label + input.radio { /*left: auto; right: 0;*/ position: inherit; } .checkboxGroup input.checkbox + label, .radioGroup input.radio + label { padding-left: 20px; padding-right: 0; } /* Horizontal forms */ .fh .fg { float: left; clear: none; padding-right: 20px; } .fh label { float: left; padding-right: 10px; padding-top: 0.7em; } .fh input:not([type=submit]):not([type=radio]):not([type=checkbox]), .fh select, .fh textarea { float: left; width: 100px; } .fh .options { float: left; } .fh .option { float: left; clear: none; padding-right: 20px; } .fh .option input.checkbox, .fh .option input.radio { margin-top: 0.9em; } /* Errors in forms */ .fg.error label { color: #b9554d; } .fg.error input, .fg.error textarea { border-color: #b9554d; background-color: pink; background-color: #ffbbb3; } .fg.error input:focus, .fg.error textarea:focus { border-color: #b9554d; background-color: #fff; -webkit-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5); -moz-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5); box-shadow: 0 0 6px rgba(171, 41, 32, 0.5); } .fg.error small { padding: 2.5px 10px; background-color: #b9554d; color: #fff; } /*= FORMS & BUTTONS */ .bt { display: inline-block; background-color: #2a85e8; color: white; text-decoration: none; text-align: center; line-height: 1.2em; cursor: pointer; border-width: 0; padding: .6em 1.5em; margin-bottom: 1em; /* button sizes ---------- */ } .bt:hover { background-color: #3b96f9; color: white; } .bt.nm { margin-bottom: 0; } .bt.bt_small { font-size: 80%; padding: .5em 1em; } .bt.bt_large { font-size: 120%; padding: .9em 2em; } .bt_sub, .bt_sub.disabled:hover { background-color: #cccccc; color: #555555; } .bt_success { background-color: #5da423; } .bt_success:hover { background-color: #6eb534; } .bt_danger { background-color: #b9554d; } .bt_danger:hover { background-color: #ca665e; } .bt_icon { padding-left: 2.7em; position: relative; text-align: left; } .bt_icon:not(.fa):before { background-color: rgba(0, 0, 0, 0.1); content: " "; } .bt_icon:before { position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; line-height: 30px; color: white; text-align: center; } .bt_icon.bt_sub:before { color: #555555; } .bt_icon.fa:before { font-size: 20px; } .bt_icon.bt_large.fa:before { font-size: 35px; } .bt_icon.bt_small.fa:before { font-size: 14px; } .bt_icon_right { padding-right: 2.7em; padding-left: .7em; text-align: right; } .bt_icon_right:before { left: auto; right: 3px; } .bt_large.bt_icon { padding-left: 3em; } .bt_large.bt_icon_right { padding-right: 3em; padding-left: 2em; } .bt_icon.bt_large:before { width: 46px; height: 46px; line-height: 46px; } .bt_small.bt_icon { padding-left: 2.3em; } .bt_small.bt_icon_right { padding-right: 2.3em; padding-left: 1em; } .bt_icon.bt_small:before { width: 20px; height: 20px; line-height: 20px; } input.bt.db { width: 100%; } .bt.disabled { cursor: not-allowed; opacity: 0.5; filter: alpha(opacity=50); background-color: #cccccc; color: #aaaaaa; } /* INPUT CLOSE TO BUTTONS IN THE SAME LINE */ .inputWithButton { position: relative; margin-bottom: 1em; } .inputWithButton .text, .inputWithButton .bt { width: 100%; } .inputWithButton .btWrap { position: absolute; top: 0; right: 0; } .inputWithButton .inputWrap input { width: 100%; -moz-box-sizing: border-box; box-sizing: border-box; } .inputWithButton_34 .inputWrap { margin-right: 34px; } .inputWithButton_34 .btWrap { width: 34px; } .row{max-width:1180px;}.fixContainer{width:980px}@media only screen and (device-width:768px),(device-width:800px){}@media only screen and (max-width:767px){body{-webkit-text-size-adjust:none}.container .row,body,.container{width:100%;min-width:0;margin-left:0px;margin-right:0px;padding-left:0px;padding-right:0px}.container .row .row .g1,.container .row .row .g2,.container .row .row .g3,.container .row .row .g4,.container .row .row .g5,.container .row .row .g6,.container .row .row .g7,.container .row .row .g8,.container .row .row .g9,.container .row .row .g10,.container .row .row .g11,.container .row .row .g12 {padding:0}.container .g1,.container .g2,.container .g3,.container .g4,.container .g5,.container .g6,.container .g7,.container .g8,.container .g9,.container .g10,.container .g11,.container .g12 {width:auto !important;float:none;margin-left:0px;margin-right:0px;padding-left:20px;padding-right:20px}.container .g1:last-child,.container .g2:last-child,.container .g3:last-child,.container .g4:last-child,.container .g5:last-child,.container .g6:last-child,.container .g7:last-child,.container .g8:last-child,.container .g9:last-child,.container .g10:last-child,.container .g11:last-child,.container .g12:last-child {margin-right:0px}}.show-on-phones{display:none !important}.show-on-tablets{display:none !important}.show-on-desktops{display:block}.hide-on-phones{display:block !important}.hide-on-tablets{display:block !important}.hide-on-desktops{display:none !important}@media only screen and (device-width:768px),only screen and (device-width:1280px),only screen and (device-width:800px){.hide-on-phones{display:block !important}.hide-on-tablets{display:none !important}.hide-on-desktops{display:block !important}.show-on-phones{display:none !important}.show-on-tablets{display:block !important}.show-on-desktops{display:none !important}}@media only screen and (max-width:767px){.hide-on-phones{display:none !important}.hide-on-tablets{display:block !important}.hide-on-desktops{display:block !important}.show-on-phones{display:block !important}.show-on-tablets{display:none !important}.show-on-desktops{display:none !important}} .ac{text-align: center;} .fl {float:left}.fr {float:right}.hidden {display:none}.nm{margin:0}.cb{clear:both}.db{display:block}.oh{overflow:hidden}.i{font-style:italic}.u{text-decoration:underline} .pf_g110 > .pf_fix { width:110px; } .pf_g110 > .pf_fluid { margin-left:110px; } .pf_r.pf_g110 > .pf_fluid { margin-right:110px; margin-left:0; } .pf >.pf_fluid > * { clear:none;} .bg2>*:nth-child(2n+1) { clear:both; } .pr { position: relative;} .fl, .alignleft { float:left; } .fr, .alignright { float:right; } .aligncenter { display: block; margin-left:auto; margin-right: auto; } @font-face { font-family: 'bariolFont'; src: url('fonts/bariol/bariol_regular-webfont.eot'); src: url('fonts/bariol/bariol_regular-webfont.eot?#iefix') format('eot'), url('fonts/bariol/bariol_regular-webfont.woff') format('woff'), url('fonts/bariol/bariol_regular-webfont.ttf') format('truetype'), url('fonts/bariol/bariol_regular-webfont.svg#bariol_regular') format('svg'); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'bariolFont'; src: url('fonts/bariol/bariol_regular-webfont.svg') format('svg'); } } @font-face { font-family:'bariolFont'; src: url('fonts/bariol-bold/bariol_bold-webfont.eot'); src: url('fonts/bariol-bold/bariol_bold-webfont.eot?#iefix') format('eot'), url('fonts/bariol-bold/bariol_bold-webfont.woff') format('woff'), url('fonts/bariol-bold/bariol_bold-webfont.ttf') format('truetype'), url('fonts/bariol-bold/bariol_bold-webfont.svg#bariol_bold') format('svg'); font-weight:bold; font-style:normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'bariolFont'; src: url('fonts/bariol-bold/bariol_bold-webfont.svg') format('svg'); font-weight:bold; } } /*= GENERAL */ .todo { background-color: pink; margin: 10px 0; border:solid 1px red; padding: 10px; } body, input, select, textarea, button { font-size: 20px; font-family: 'bariolFont', sans-serif; } a { color:#FF466E; } a:hover { color:#AAC869; } p { line-height: 1.4em; } .f15 { font-size: 15px; font-size: 1.5rem;} /* end of general */ /* -------------------------------------------------- Buttons -------------------------------------------------- */ /* .bt, .bt.disabled:hover, .bt_input input { display: inline-block; text-align: center; padding: 9px 34px 11px; margin-bottom:9px; color: #fff; text-decoration: none; font-weight: bold; line-height: 1; position: relative; cursor: pointer; background-color: #DE3C61; background-repeat: repeat-x; background-image: -khtml-gradient(linear, left top, left bottom, from(#FF466F), to(#DE3C61)); background-image: -moz-linear-gradient(top, #FF466F, #DE3C61); background-image: -ms-linear-gradient(top, #FF466F, #DE3C61); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF466F), color-stop(100%, #0064cd)); background-image: -webkit-linear-gradient(top, #FF466F, #DE3C61); background-image: -o-linear-gradient(top, #FF466F, #DE3C61); background-image: linear-gradient(top, #FF466F, #DE3C61); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF466F', endColorstr='#DE3C61', GradientType=0); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border: 1px solid #DE3C61; border-color: #DE3C61 #DE3C61 #85162F; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -webkit-transition: 0.1s linear all; -moz-transition: 0.1s linear all; -ms-transition: 0.1s linear all; -o-transition: 0.1s linear all; transition: 0.1s linear all; } .bt:hover, .bt_input input:hover { color:#fff; background-position: 0 -15px; text-decoration: none; } .bt.disabled { opacity: 0.5; filter:alpha(opacity=50); cursor: not-allowed; } .bt.disabled:hover { cursor:default;} .bt:focus, .bt_input input:focus { outline: 1px dotted #666; } .bt:active, .bt_input input:active { -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); } .bt_small.bt { font-size: 11px; padding: 8px 20px 10px; } .bt_large.bt { font-size: 18px; padding: 11px 48px 13px; } */ .btOutlineWrap { position: relative; } .btOutlineWrap:before { content: " "; position: absolute; top:50%; left: 0; z-index: -1; width: 100%; height: 1px; background-color: #FF466E; } .btOutline { display: block; border:solid 1px #FF466E; padding: 0.7em 1em; background-color: #fff; width: 70%; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-transition: width .2s, background-color .2s, color .2s; transition: width .2s, background-color .2s, color .2s; } .btOutline:hover { width: 100%; background-color: #FF466E; color: #fff; } /*= HEADER */ #mainBanner { background-color: #FF466E; background-color: rgb(113, 80, 88); } #mainBanner a:hover { opacity: .7; } .headFixed #mainBanner { position: fixed; z-index: 10; top:0; left:0; width: 100%; box-shadow: 0 0 6px rgba(0, 0, 0, 0.68); background-position: center bottom; } #logo { display: block; float: left; width: 104px; height: 38px; text-indent: -9000px; background: url("images/layout/sp.png") no-repeat 0 0; margin:15px 20px; position: relative; z-index: 10; } #mainBanner ul, #mainBanner li { margin: 0; } #main-nav-menu a { padding: 10px 30px; display: block; } #main-nav-menu a:hover { background-color: rgba(255, 255, 255, 0.3); opacity: 1; } #main-nav-menu .current_page_item a, #main-nav-menu .current-menu-item a { background-color: #fff; color:#A0243F; text-shadow: none; } #main-nav-menu .current_page_item a:hover, #main-nav-menu .current-menu-item a:hover { cursor: default; } #socialMenu a { display: block; padding: 4px; } #socialMenu a em, #searchsubmit { display: block; text-indent: -9000px; width: 26px; height: 26px; background: url("images/layout/sp.png") no-repeat 0 0; } #socialMenu a#socialMenu_twitter em { background-position: -5px -94px; } #socialMenu a#socialMenu_linkedin em { background-position: -37px -94px; } #socialMenu a#socialMenu_gplus em { background-position: -69px -94px; } #socialMenu a#socialMenu_instagram em { background-position: -5px -127px; } #socialMenu a#socialMenu_rss em { background-position: -37px -127px; } #socialMenu a#socialMenu_search em { background-position: -69px -127px; } #searchsubmit { margin: 4px; background-position: -102px -127px; } #mainContainer { margin-top: 40px; } .headFixed #mainContainer { padding-top: 25%; } @media (min-width:1280px){ #mainBanner { background-image: url("images/layout/mainBanner/main-bg-workingHand-1980.jpg"); } #mainBanner .g12 { padding-bottom: 29%; } .headFixed #mainContainer { padding-top: 404px; } } @media (min-width:768px) and (max-width:1279px){ #mainBanner { background-image: url("images/layout/mainBanner/main-bg-workingHand-1280.jpg"); } #mainBanner .g12 { padding-bottom: 20%; } } @media (min-width:768px){ /* biger than mobile */ #logo { position: fixed; } #mainBanner { position: relative; /*margin-bottom: 60px;*/ background-position:center center; background-repeat: no-repeat; background-size: 100%; } #mainBanner a { color: #fff; text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); } #mainBanner li { display: inline-block; float: none; } #main-nav-menu { position: absolute; bottom:10px; right: 20px; } #main-nav-menu li + li { margin-left: 40px; } #mainBanner #socialMenu { float: right; margin: 28px 20px 0 0; position: relative; /*position: fixed; right: 0;*/ } #socialMenu li + li { margin-left: 6px; } .headFixed #mainBanner .g12 { padding-bottom: 0; height: 61px; } .headFixed #mainBanner #logo { margin: 10px 20px; } .headFixed #mainBanner #toggledFixedBar { float: right; } .headFixed #mainBanner #main-nav-menu { position: static; float: right; margin: 12px; } .headFixed #mainBanner #socialMenu { position: relative; float: left; margin-top: 13px; } #searchPanel #searchform { margin: 0; } #searchPanel { position: absolute; top: 0; right: 0; display: block; width: 100%; background-color: #fff; opacity: 0; -webkit-transform:scale3d(0,1,1); transform:scale3d(0,1,1); -webkit-transform-origin:top right; transform-origin:top right; transition-duration: 0.2s; -webkit-transition-duration: 0.2s; } .toggledSearchBoxVisible #searchPanel { opacity: 1; -webkit-transform:scale3d(1,1,1); transform:scale3d(1,1,1); } #searchPanel input { outline: none; border-width: 0; } #searchPanel #s { height: 30px; padding: 0 7px; margin: 2px 0; color:#A0243F; } } @media (max-width:1024px){ .headFixed #mainBanner #socialMenu { display: none; } .headFixed #mainBanner .toggledFixedBarTriggerVisible #socialMenu { display: block; } } @media (max-width:767px){ /* mobile */ #mainBanner { background-color: #FF466E; } #mainContainer { padding-top: 0; } .headFixed #mainContainer { padding-top: 61px; } #logo { margin: 9px 20px 14px; } #toggledFixedBarTrigger { float: right; width: 32px; height: 32px; margin: 13px 14px 0 0; text-indent: -9000px; position: relative; z-index: 10; } #toggledFixedBarTrigger:before { position: absolute; top:4px; left:4px; width: 24px; height: 24px; content: " "; background: url("images/layout/sp.png") no-repeat -139px -96px; } #toggledFixedBarTrigger:hover:before { opacity: 0.6; } #toggledFixedBar { display: block !important; width: 200px; height: 100%; position: fixed; z-index: 9; top:0; right: 0; background-color: #FF466E; transform:translateX(200px); -webkit-transform:translateX(200px); transition-duration: 0.2s; -webkit-transition-duration: 0.2s; } .toggledFixedBarTriggerVisible #toggledFixedBar { transform:translateX(0); -webkit-transform:translateX(0); } #toggledFixedBar a { color: #fff; z-index: 9; } #toggledFixedBar #main-nav-menu { margin-top: 61px; } #socialMenu { padding: 20px; } #socialMenu li { display: inline-block; } } @media (max-width:240px){ /*= CSS FOR SCREENS SMALLER THAN 240px */ } @media (min-width:320px){ } @media (min-width:480px){ } /* end of header */ .post { background: url("images/layout/separatior_500_green.gif") left bottom no-repeat; margin-bottom: 20px; padding-bottom: 30px; } .post h1, .post h2, .post h3, .post h4, .post h5, .h1, .h2, .h3, .h4, .h5 { /*font-family: 'Quicksand', sans-serif; font-weight: 700; line-height:0.9em; letter-spacing:-0.1em; */ color:#8EB638; /*text-shadow:0 0 1px #D2E1B0;*/ line-height: 1em; font-weight:normal; } .post h2, .post h3, .h2 { font-size:30px; margin:1em 0 0.5em; } .post h3 , .h3 { font-size:24px; } .post h1, .h1, .page .post h1, .page .post h2{ font-size:33px; /*background: url("images/layout/puff_title.gif") left top no-repeat;*/ padding: 0 0 .2em 0; /*min-height:30px; margin-left:-35px;***/ } /* .home .post h1 strong, .archive .post h2 strong { font-weight: 700; } */ .entry { } .entry a { } .entry a:hover { } .entry ul { list-style-type: disc; margin-left: 20px; } .entry li { line-height: 1.4em; } #meta { } .postmetadata { font-size:15px; } .postmetadata li{ float:left; margin-right:20px; } .postmetadata li .icon { float:left; background: url("images/layout/sprite.gif") -41px -68px no-repeat; width:20px; height:20px; text-indent:-5000px; } .postmetadata li.comments .icon { background-position:-64px -68px; } .postmetadata li.tags .icon { background-position:-87px -68px; } #sidebar {} ul.nice.ink .bullet { background: url("images/layout/sprite.gif") -172px -183px no-repeat; width:10px; height:10px; left:0; } ul.nice.ink li { padding-left:20px;} ul.nice.ink li:nth-child(4n+1) span.bullet { background-position: -172px -183px; } ul.nice.ink li:nth-child(4n+2) span.bullet { background-position: -172px -193px; } ul.nice.ink li:nth-child(4n+3) span.bullet { background-position: -172px -203px; } ul.nice.ink li:nth-child(4n+4) span.bullet { background-position: -172px -213px; } #mostPopular { margin-bottom: 40px; } #mostPopular li a { font-size:15px; font-weight: normal; color:#6B7E81; display:block; line-height: 1.1em; } #mostPopular li a:hover { color:#FF466E; } #whoAmI .profilePic { background: url("images/layout/sprite.gif") -211px -143px no-repeat; width:69px; height:69px; display: block; } #whoAmI .title { margin:0; min-height: 22px;} #whoAmI .title a { color:#6B7E81; text-shadow:0 0 1px #ccc;} #whoAmI .title a:hover { color:#FF466E; } #whoAmI em { display:block; margin-bottom: 7px; font-size:15px;} #socialPanel #whoAmI { margin-bottom: 10px; } #sideBarTechnologies { background: url("images/layout/sprite.gif") 0px -146px no-repeat; height:34px; width:206px; margin:0 auto; } .nextPrevButtons { margin-bottom:40px; } .nextPrevButtons a, .more-link, p a.more-link, .pinkBt { display:block; background: url("images/layout/sprite.gif") -70px -178px no-repeat; width:102px; height:46px; line-height:46px; color:#fff; text-align:center; font-family: 'bariolFont', serif; font-size:18px; } .nextPrevButtons a:hover, .more-link:hover, .pinkBt:hover { opacity:0.8; color:#fff;} #comment { clear:both; width:100%; height:80px; } ol.commentlist { list-style: none; margin-left:0; } #respond { background-color:#AAC869; border-radius:4px; padding:20px; } #respond .title { color: #fff; font-size:25px; text-shadow:0 0 1px #ccc; } #recaptcha-submit-btn-area { padding-top:20px;} /* ol.commentlist li { } ol.commentlist li.alt { } ol.commentlist li.bypostauthor { } ol.commentlist li.byuser { } ol.commentlist li.comment-author-admin { } ol.commentlist li.comment { border-bottom: 1px dotted #666; padding: 10px; } ol.commentlist li.comment div.comment-author { } ol.commentlist li.comment div.vcard { } ol.commentlist li.comment div.vcard cite.fn { font-style: normal; } ol.commentlist li.comment div.vcard cite.fn a.url { } ol.commentlist li.comment div.vcard img.avatar { float:right; margin: 0 0 10px 10px; } ol.commentlist li.comment div.vcard img.avatar-32 { } ol.commentlist li.comment div.vcard img.photo { } ol.commentlist li.comment div.vcard span.says { } ol.commentlist li.comment div.commentmetadata { } ol.commentlist li.comment div.comment-meta { font-size: 10px; } ol.commentlist li.comment div.comment-meta a { color: #ccc; } ol.commentlist li.comment p { } ol.commentlist li.comment ul { } ol.commentlist li.comment div.reply { font-size: 11px; } ol.commentlist li.comment div.reply a { font-weight: bold; } ol.commentlist li.comment ul.children { list-style: none; margin: 10px 0 0; } ol.commentlist li.comment ul.children li { } ol.commentlist li.comment ul.children li.alt { } ol.commentlist li.comment ul.children li.bypostauthor { } ol.commentlist li.comment ul.children li.byuser { } ol.commentlist li.comment ul.children li.comment { } ol.commentlist li.comment ul.children li.comment-author-admin { } ol.commentlist li.comment ul.children li.depth-2 { border-left: 5px solid #555; margin: 0 0 10px 10px; } ol.commentlist li.comment ul.children li.depth-3 { border-left: 5px solid #999; margin: 0 0 10px 10px; } ol.commentlist li.comment ul.children li.depth-4 { border-left: 5px solid #bbb; margin: 0 0 10px 10px; } ol.commentlist li.comment ul.children li.depth-5 { } ol.commentlist li.comment ul.children li.odd { } ol.commentlist li.even { background: #fff; } ol.commentlist li.odd { background: #f6f6f6; } ol.commentlist li.parent { border-left: 5px solid #111; } ol.commentlist li.thread-alt { } ol.commentlist li.thread-even { } ol.commentlist li.thread-odd { } */ .commentlist .comment { background: url("images/layout/comments.gif") left 7px no-repeat; padding-left:40px; } .commentlist .comment-body { background: url("images/layout/separatior_165_green.gif") left bottom no-repeat; padding-bottom:20px; } .comment-author img { display:none;} .comment-author cite { font-weight:bold;} .comment-reply-link { background: url("images/layout/reply_arrow.gif") left 2px no-repeat; padding-left:20px; } /*= TWITTER LAST TWEETS */ #twitter_update_list { list-style-type:none; font-size:11px; line-height:11px; margin:0 0 5px 0; } #twitter_update_list span.icon { float:left; width:33px; height:33px; background: transparent url('images/layout/sprite.gif') -5px -106px; } #twitter_update_list p { margin-left:37px; } /* end of twitter */ #followUs { padding: 40px 0; text-align: center; } #followUs .iconsGroup { display:inline-block; } #followUs a, a.sharePost em { background: transparent url('images/layout/sprite.gif') -41px -94px; display:inline-block; width:40px; height: 44px; text-indent: -9000px; outline: none; } #followUs a:hover { opacity: 0.8;} #followUs a.facebook { background-position: -81px -94px; width:42px; } #followUs a.gplus { background-position: -126px -95px; } #followUs a.rss { background-position: -173px -95px; width:43px; } #followUs a.instagram { background-position: -218px -95px; width:42px; } #followUs a.linkedin { background-position: -262px -93px; width:44px; } a.sharePost { line-height: 50px; height:44px; vertical-align: top; color:#04BBD4; font-weight: bold; font-size: 18px; display:inline-block; } a.sharePost em { margin-right: 10px;} a.sharePost:hover { opacity:0.8;} /* ############## */ /* PORTFOLIO */ /* ############## */ .portfolioItems { padding-top: 20px; } .portfolioItems .item { -webkit-animation: showPortfolioItem .5s; animation: showPortfolioItem .5s; } .portfolioItems .item_right { margin-right: 0 ;} .portfolioItems .item .wrap { margin: 0 0 25px; border:solid 1px #fff; box-shadow: 0 0 1px #A0A0A0; position:relative; overflow: hidden; cursor: pointer; } .portfolioItems .item img { display: block; width: 100%; -webkit-transition: -webkit-transform .3s; transition: transform .3s; } .portfolioItems .item .wrap:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transform-origin:center bottom; transform-origin:center bottom; -webkit-filter: blur(2px); filter: blur(2px); } .portfolioItems .item .staticTitle, .portfolioItems .item .desc { background-color: rgba(255,255,255,.7); border-top:solid 1px #fff; position: absolute; z-index: 2; bottom:0; left:0; width: 100%; max-height: 100%; } .portfolioItems .item .staticTitle { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity .2s; transition: opacity .2s; padding: 3px 10px; } .portfolioItems .item .wrap:hover .staticTitle { opacity: 0; } .portfolioItems .item .desc { z-index: 3; opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform .3s, opacity .3s; transition: transform .3s, opacity .3s; } .portfolioItems .item .wrap:hover .desc { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; /*-webkit-transition: -webkit-transform .6s, opacity .6s; transition: transform .6s, opacity .6s;*/ /*border-top-width: 0;*/ } .portfolioItems .item .desc .title { margin:10px; font-size: 21px; font-size: 2.1rem; } .portfolioItems .item .desc .title a { color:#555; } .portfolioItems .item .desc .tagSquared { margin:0 10px 2px 10px; /*opacity: 0;*/ } .tagSquared .tag { background-color: #777; color: #FFF; margin: 0 1px 1px 0; font-size: 15px; padding: 0 4px; line-height: 1.5em; height: 1.4em; display: inline-block; } .portfolioItems .item .desc p { margin: 10px; font-size: 15px; /*opacity: 0;*/ } .portfolioItems .item .desc p.date { margin-top: 0; font-size: 14px; } /*.portfolioItems .item .desc .tagSquared, .portfolioItems .item .desc p { -webkit-transform: translate(0,100%); transform: translate(0,100%); -webkit-transition: opacity .6s, -webkit-transform .6s; transition: opacity .6s, transform .6s; -webkit-transition-delay: .12s; transition-delay: .12s; } .portfolioItems .item .wrap:hover .desc p { -webkit-transition-delay: .3s; transition-delay: .3s; } .portfolioItems .item .wrap:hover .desc .tagSquared, .portfolioItems .item .wrap:hover .desc p { opacity: 1; -webkit-transform: translate(0,0); transform: translate(0,0); }*/ @keyframes showPortfolioItem { 0% { transform: scale(.6); } 100% { transform: scale(1); } } @-webkit-keyframes showPortfolioItem { 0% { -webkit-transform: scale(.6); } 100% { -webkit-transform: scale(1); } } @media screen and (min-width:600px) and (max-width: 971px) { .portfolioItems.cols3 .item .wrap { margin-right: 20px; margin-left: 20px; } .portfolioItems.cols3 .item { width: 50%; float:left; } .portfolioItems.cols3 .item:nth-child(2n+1) { clear:both; } .portfolioItems.cols3 .item:nth-child(2n+1) .wrap { margin-left: 0; margin-right: 12px; } .portfolioItems.cols3 .item:nth-child(2n+2) .wrap { margin-right: 0; margin-left: 12px; } } @media screen and (min-width:972px){ .portfolioItems.cols3 .item .wrap { margin-right: 20px; margin-left: 20px; } .portfolioItems.cols3 .item { float:left; width: 33.3%; } .portfolioItems.cols3 .item:nth-child(3n+1) { clear:both; } .portfolioItems.cols3 .item:nth-child(3n+1) .wrap { margin-left: 0; } .portfolioItems.cols3 .item:nth-child(3n+2) .wrap { margin-right: 10px; margin-left: 10px; } .portfolioItems.cols3 .item:nth-child(3n+3) .wrap { margin-right: 0; } } #aboutMePortfolioCol { margin-bottom: 40px; } #portfolio #aboutMePortfolioCol { padding-top: 50px; } #aboutMePortfolioCol > .title { margin-bottom: .7em; } #aboutMePortfolioCol #whoAmI { margin-bottom: .5em; } .portfolio_detail_top { position: relative; margin-bottom: 40px; } .portfolio_detail_top img { display: block; } .portfolio_detail_top_content { padding: 10px 20px; background-color: rgba(255,255,255,.7); } .overTitleTopRight .portfolio_detail_top_content { right: 0; left:auto; text-align: right; } .overTitleBottomRight .portfolio_detail_top_content { right: 0; left:auto; top:auto; bottom:10%; text-align: right; } .overTitleBottomLeft .portfolio_detail_top_content { top:auto; bottom:10%; } .portfolio_detail_top_content .title { font-size: 33px; font-size: 3.3rem; line-height: 1.2em; } .portfolio_detail_top_content p { line-height: 1.1em; } @media screen and (min-width:600px) { .portfolio_detail_top_content { position: absolute; top:10%; left:0; width: 60%; } } @media screen and (min-width:768px) { .portfolio_detail_top_content { width: 40%; } } #aboutMePage .pageContent img { float: none; margin: 0 auto 20px; display: block; padding: 5px; background-color: #FFF; box-shadow: 0 0 10px rgba(0, 0, 0, 0.39); -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } @media screen and (min-width:600px) { #aboutMePage .pageContent img { float: left; margin: 0 20px 5px 0; } } .nicePeopleList li { float: left; margin: 0; } .nicePeopleList li > * { display: block; margin: 0 3px 3px 0; } .nicePeopleList:hover img { -webkit-filter: blur(1px) grayscale(60%); filter: blur(1px) grayscale(60%); } .nicePeopleList :hover img { -webkit-filter: blur(0) grayscale(0%); filter: blur(0) grayscale(0%); } @media screen and (min-width:768px){ .nicePeopleList li { width: 20%; } .nicePeopleList li img { width: 100%; } } .techGroups, .techList { margin-left: 0; } .techGroups .title { color: #555; padding-top: 9px; font-size: 20px; font-size: 2.2rem; } .techGroups > li:nth-child(3n+1) { clear: both; } .techList li { margin-bottom: 1px; } @media screen and (min-width:480px){ .techGroups > li { width: 50%; float: left; } .techList li { max-width: 260px; margin-right: 40px; } } @media screen and (min-width:768px){ .techGroups > li { width: 33%; } } .percBar { background-color: rgba(142,182,56,.3); } .percBar-progress { background-color: #8EB638; color: #fff; line-height: 30px; display: block; -webkit-transition: -webkit-transform 1s 0 ease, opacity .5s 0 linear; transition: transform 1s 0 ease, opacity .5s 0 linear; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left top; transform-origin: left top; } .percBar-progress strong { font-weight: normal; padding-left: 10px; white-space: nowrap; text-shadow: 1px 1px 0 #8EB638; opacity: 0; -webkit-transition: opacity .6s .6s linear; transition: opacity .6s .6s linear; } .visible .percBar-progress { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; } .visible .percBar-progress strong { opacity: 1; } #aboutMePage { margin: 40px 0 80px; } #knowledgeSection { margin-bottom: 20px; } .sideBarSection { margin-bottom: 40px; } .sideBarSection .tagSquared { margin-bottom: 20px; } /* IOS SLIDER */ .iosSlider { /* required */ position: relative; top: 0; left: 0; overflow: hidden; } /* slider */ .iosSlider .slider { /* required */ width: 100%; height: 100%; } /* slide */ .iosSlider .slider .slide { /* required */ float: left; } .iosSlider, .iosSlider .slider .slide { width: 100%; /* slider width */ /*height: 200px;*/ /* slider height */ } #instagramSlider { margin-bottom: 10px; } #instagramSlider img { width: 100%; } #instagramSlider .slide { position:relative; } #instagramSlider .slide a { position: absolute; bottom: 0; left:0; z-index:99; width:100%; background: rgba(255, 255, 255, 0.7); color:#555; display:none; } #instagramSlider .slide:hover a { display: block;} #instagramSlider .slide a span { display: block; padding:20px; text-align: center; } #portfolioSlider { height:184px; margin-bottom: 10px; } /* end of IOS slider */ code, pre, body .syntaxhighlighter { background-color:transparent; border-width:0; border-left:solid 2px #FF466E; padding:0 0 0 10px; font-size: 13px !important; } /** * SyntaxHighlighter * http://alexgorbatchev.com/SyntaxHighlighter * * SyntaxHighlighter is donationware. If you are using it, please donate. * http://alexgorbatchev.com/SyntaxHighlighter/donate.html * * @version * 3.0.83 (July 02 2010) * * @copyright * Copyright (C) 2004-2010 Alex Gorbatchev. * * @license * Dual licensed under the MIT and GPL licenses. */ .syntaxhighlighter a,.syntaxhighlighter div,.syntaxhighlighter code,.syntaxhighlighter table,.syntaxhighlighter table td,.syntaxhighlighter table tr,.syntaxhighlighter table tbody,.syntaxhighlighter table thead,.syntaxhighlighter table caption,.syntaxhighlighter textarea{ -moz-border-radius:0 0 0 0 !important; -webkit-border-radius:0 0 0 0 !important; background:none !important; border:0 !important; bottom:auto !important; float:none !important; height:auto !important; left:auto !important; line-height:1.1em !important; margin:0 !important; outline:0 !important; overflow:visible !important; padding:0 !important; position:static !important; right:auto !important; text-align:left !important; top:auto !important; vertical-align:baseline !important; width:auto !important; box-sizing:content-box !important; font-family:"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important; font-weight:normal !important; font-style:normal !important; font-size:1em !important; direction:ltr !important}.syntaxhighlighter{ width:100% !important; margin:1em 0 1em 0 !important; position:relative !important; overflow:auto !important; overflow-y:hidden !important; font-size:1em !important}.syntaxhighlighter code{ display:inline !important}.syntaxhighlighter.source{ overflow:hidden !important}.syntaxhighlighter .bold{ font-weight:bold !important}.syntaxhighlighter .italic{ font-style:italic !important}.syntaxhighlighter .line{ white-space:pre !important}.syntaxhighlighter table{ width:100% !important}.syntaxhighlighter table caption{ text-align:left !important; padding:.5em 0 0.5em 1em !important}.syntaxhighlighter table td.code{ width:100% !important}.syntaxhighlighter table td.code .container{ position:relative !important}.syntaxhighlighter table td.code .container textarea{ box-sizing:border-box !important; position:absolute !important; left:0 !important; top:0 !important; width:100% !important; height:100% !important; border:none !important; background:white !important; padding-left:1em !important; overflow:hidden !important; white-space:pre !important}.syntaxhighlighter table td.gutter .line{ text-align:right !important; padding:0 0.5em 0 1em !important}.syntaxhighlighter table td.code .line{ padding:0 1em !important}.syntaxhighlighter.nogutter td.code .container textarea,.syntaxhighlighter.nogutter td.code .line{ padding-left:0em !important}.syntaxhighlighter.show{ display:block !important}.syntaxhighlighter.collapsed table{ display:none !important}.syntaxhighlighter.collapsed .toolbar{ padding:0.1em 0.8em 0em 0.8em !important; font-size:1em !important; position:static !important; width:auto !important; height:auto !important}.syntaxhighlighter.collapsed .toolbar span{ display:inline !important; margin-right:1em !important}.syntaxhighlighter.collapsed .toolbar span a{ padding:0 !important; display:none !important}.syntaxhighlighter.collapsed .toolbar span a.expandSource{ display:inline !important}.syntaxhighlighter .toolbar{ position:absolute !important; right:1px !important; top:1px !important; width:11px !important; height:11px !important; font-size:10px !important; z-index:10 !important}.syntaxhighlighter .toolbar span.title{ display:inline !important}.syntaxhighlighter .toolbar a{ display:block !important; text-align:center !important; text-decoration:none !important; padding-top:1px !important}.syntaxhighlighter .toolbar a.expandSource{ display:none !important}.syntaxhighlighter.ie{ font-size:.9em !important; padding:1px 0 1px 0 !important}.syntaxhighlighter.ie .toolbar{ line-height:8px !important}.syntaxhighlighter.ie .toolbar a{ padding-top:0px !important}.syntaxhighlighter.printing .line.alt1 .content,.syntaxhighlighter.printing .line.alt2 .content,.syntaxhighlighter.printing .line.highlighted .number,.syntaxhighlighter.printing .line.highlighted.alt1 .content,.syntaxhighlighter.printing .line.highlighted.alt2 .content{ background:none !important}.syntaxhighlighter.printing .line .number{ color:#bbb !important}.syntaxhighlighter.printing .line .content{ color:black !important}.syntaxhighlighter.printing .toolbar{ display:none !important}.syntaxhighlighter.printing a{ text-decoration:none !important}.syntaxhighlighter.printing .plain,.syntaxhighlighter.printing .plain a{ color:black !important}.syntaxhighlighter.printing .comments,.syntaxhighlighter.printing .comments a{ color:#008200 !important}.syntaxhighlighter.printing .string,.syntaxhighlighter.printing .string a{ color:blue !important}.syntaxhighlighter.printing .keyword{ color:#069 !important; font-weight:bold !important}.syntaxhighlighter.printing .preprocessor{ color:gray !important}.syntaxhighlighter.printing .variable{ color:#a70 !important}.syntaxhighlighter.printing .value{ color:#090 !important}.syntaxhighlighter.printing .functions{ color:#ff1493 !important}.syntaxhighlighter.printing .constants{ color:#06c !important}.syntaxhighlighter.printing .script{ font-weight:bold !important}.syntaxhighlighter.printing .color1,.syntaxhighlighter.printing .color1 a{ color:gray !important}.syntaxhighlighter.printing .color2,.syntaxhighlighter.printing .color2 a{ color:#ff1493 !important}.syntaxhighlighter.printing .color3,.syntaxhighlighter.printing .color3 a{ color:red !important}.syntaxhighlighter.printing .break,.syntaxhighlighter.printing .break a{ color:black !important} .syntaxhighlighter{ background-color:white !important}.syntaxhighlighter .line.alt1{ background-color:white !important}.syntaxhighlighter .line.alt2{ background-color:white !important}.syntaxhighlighter .line.highlighted.alt1,.syntaxhighlighter .line.highlighted.alt2{ background-color:#e0e0e0 !important}.syntaxhighlighter .line.highlighted.number{ color:black !important}.syntaxhighlighter table caption{ color:black !important}.syntaxhighlighter .gutter{ color:#afafaf !important}.syntaxhighlighter .gutter .line{ border-right:3px solid #6ce26c !important}.syntaxhighlighter .gutter .line.highlighted{ background-color:#6ce26c !important; color:white !important}.syntaxhighlighter.printing .line .content{ border:none !important}.syntaxhighlighter.collapsed{ overflow:visible !important}.syntaxhighlighter.collapsed .toolbar{ color:blue !important; background:white !important; border:1px solid #6ce26c !important}.syntaxhighlighter.collapsed .toolbar a{ color:blue !important}.syntaxhighlighter.collapsed .toolbar a:hover{ color:red !important}.syntaxhighlighter .toolbar{ color:white !important; background:#6ce26c !important; border:none !important}.syntaxhighlighter .toolbar a{ color:white !important}.syntaxhighlighter .toolbar a:hover{ color:black !important}.syntaxhighlighter .plain,.syntaxhighlighter .plain a{ color:black !important}.syntaxhighlighter .comments,.syntaxhighlighter .comments a{ color:#008200 !important}.syntaxhighlighter .string,.syntaxhighlighter .string a{ color:blue !important}.syntaxhighlighter .keyword{ color:#069 !important}.syntaxhighlighter .preprocessor{ color:gray !important}.syntaxhighlighter .variable{ color:#a70 !important}.syntaxhighlighter .value{ color:#090 !important}.syntaxhighlighter .functions{ color:#ff1493 !important}.syntaxhighlighter .constants{ color:#06c !important}.syntaxhighlighter .script{ font-weight:bold !important; color:#069 !important; background-color:none !important}.syntaxhighlighter .color1,.syntaxhighlighter .color1 a{ color:gray !important}.syntaxhighlighter .color2,.syntaxhighlighter .color2 a{ color:#ff1493 !important}.syntaxhighlighter .color3,.syntaxhighlighter .color3 a{ color:red !important}.syntaxhighlighter .keyword{ font-weight:bold !important} /*= RESPONSIVE VIDEO EMBED*/ .rve-embed-container{position:relative!important;padding-bottom:56.25%!important;padding-top:30px!important;height:0!important;overflow:hidden!important}.rve-embed-container iframe,.rve-embed-container object,.rve-embed-container embed{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important} .videoPosterWrap { position: relative; } .videoPosterWrap .videoPoster { cursor: pointer; width: 100%; } .triggerVideoPoster { position: absolute; z-index: 2; top:23%; left:33%; width: 33%; height: 0; } .triggerVideoPoster em { display: block; width: 100%; height: 100%; border-radius: 50%; text-indent: -9000px; background-color: rgba(255,255,255,0.2); } .triggerVideoPoster em:after { content: " "; position: absolute; z-index: 3; top:25%; left: 25%; width: 50%; height: 50%; border-radius: 50%; background-color: rgba(255,255,255,0.7); } .triggerVideoPoster em:before { content: " "; display: block; position: absolute; z-index: 4; top:37%; left: 42%; width: 22%; height: 26%; background: url('images/layout/play_icon.png') center center no-repeat; background-size: 100%; } .videoPosterWrap:hover .triggerVideoPoster em { background-color: rgba(255,255,255,0.4); } .videoPosterWrap:hover .triggerVideoPoster em:after { background-color: rgba(255,255,255,1); } /*= RECAPTCHA */ .recaptcha-error{ font-size:1.8em; padding-bottom:8px}.mh-plaintext{ background:transparent url(email.png) no-repeat scroll left center; border:medium none; color:#27D; height:16px; padding:2px 2px 4px 20px}.mh-plaintext a,.mh-plaintext a:hover,.mh-plaintext a:visited,.mh-plaintext a:visited:hover{ color:#F70; font-weight:bolder; text-decoration:none; border:0; background-color:transparent !important}.mh-hyperlinked{ background:transparent url(email.png) no-repeat scroll left center; border:medium none; color:#27D; height:16px; padding:2px 2px 4px 20px}.mh-hyperlinked a,.mh-hyperlinked a:hover,.mh-hyperlinked a:visited,.mh-hyperlinked a:visited:hover{ color:#F70; font-weight:bolder; text-decoration:none; border:0}.lang-select label,.theme-select label{ vertical-align:middle !important}.lang-select select,.theme-select select{ vertical-align:middle !important}.recaptcha-form{ margin:auto !important; width:25em !important}.recaptcha-options td{ vertical-align:top !important}.which-key label{ font-weight:bold}.copyright{ text-align:center; font-size:.85em} /*= RELATED POSTs */ .relatedPost .pf_fluid, .relatedPost .postTxt { position: absolute; bottom:5px; } .relatedPost h4 a { font-size:18px; color:#6B7E81; line-height:0.9em; } .relatedPost h4 a:hover { color:#FF466E; } .relatedPost li > div { border-left:solid 2px #FF466E; padding: 5px 0 0 10px; min-height: 105px; } .relatedPost .date { color:#ccc; cursor:default; } /* end of related posts */ .authorPageInfo { box-shadow: 0 0 10px #DDD; border-radius: 25px; padding:10px; margin-bottom:40px; } .iframe300height { height: 300px; } /*@media screen and(-webkit-device-pixel-ratio: 2) {*/ #logo, #socialMenu a em, #searchsubmit, #toggledFixedBarTrigger:before { background-image: url("images/layout/sp@2x.png"); background-size: 300px 300px; } /*}*/