/*------------------------------------------------------
CSS overview:
1. RESET
2. MAIN CONTENT
3. PRIMARY MENU
4. SECTION TITLE
5. FOOTER
8. COLUMNS
9. TEAM
10. GRID VIEW
11. BUTTONS
12. HIGHLIGHTS
13. DROPCAPS
14. DIFFERENT UL STYLES
15. TOGGLE
16. ACCORDION
17. PORTFOLIO
18. PORTFOLIO THUMBNAIL HOVER
19. SHAPED STYLE ITEM
20. HEXAGON STYLE
21. CIRCLE STYLE
22. TRIANGLE STYLE
23. PORTFOLIO FILTERABLE NAVIGATION
24. ITEM NAVIGATION
25. CONTACT MODAL WINDOW
26. CONTACT
---------------------------------------------------------*/
/*--------------------------------------------------
RESET
---------------------------------------------------*/
pre,code{
font-family:"Open Sans Condensed", Helvetica, Arial, sans-serif;
white-space:pre;
padding:20px;
letter-spacing: 0.1em;
}
pre{
padding:5px;
}
code{
-moz-border-radius: 2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
font-size:11px;
color: #666666;
padding: 3px;
padding-left: 10px;
background-color: #f8f8f8;
}
.clear:after {
clear: both;
content: "";
display: block;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
text-decoration:none;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: 200;
}
html, body {
height: 100%;
width: 100%;
margin:0px;
}
::-moz-selection{ color: #fff; background: #707070; }
::selection { color: #fff; background: #707070; }
body {
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 17px;
color: #676767;
background: repeat 0 0 #f8f8f8;
font-weight: 200;
}
h1,h2,h3,h4,h5,h6 {
margin-bottom: 15px;
font-weight: normal;
clear:both;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: 200;
}
h1{
font-size:42px;
line-height: 44px;
}
h2{
font-size: 32px;
line-height: 34px;
}
h3{
font-size:24px;
line-height: 29px;
}
h4{
font-size:20px;
line-height: 25px;
}
h5{
font-size:16px;
line-height: 21px;
}
h6{
font-size:14px;
line-height: 17px;
}
h1.title, h2.title, h3.title, h4.title, h5.title, h6.title {
font-size:26px;
line-height: 20px;
font-weight: 300;
margin-top: 10px;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
}
ul, ol {
display: block;
padding: 0px;
margin: 0 0 14px 17px;
}
blockquote {
float: left;
width: 60%;
margin: 10px 15px 10px 0;
color: #aaa;
background: url(../images/sprite.png) no-repeat scroll 0 -330px transparent;
font: 16px/17px Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: italic;
padding-left: 40px;
}
blockquote.right {
float: right;
margin: 10px 0 15px 15px;
}
blockquote p {
padding-left: 0px;
}
p {
margin-bottom: 14px;
margin-top: 10px;
font-weight: 300 !important;
font-size: 1.5em;
line-height: 1.5;
text-align: justify;
}
p:last-child {
margin-bottom: 0;
}
em {
font-style: italic;
}
strong, b {
font-weight: bold;
}
input, textarea, select, #recaptcha_response_field {
outline: medium none;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: 200;
font-size:12px;
color: #bbb;
border: 1px solid #ddd;
-moz-border-radius: 2px;
-webkit-border-radius:2px;
border-radius:2px;
-webkit-transition: all 0.2s ease-out 0s;
-moz-transition: all 0.2s ease-out 0s;
-o-transition: all 0.2s ease-out 0s;
background-color: #fff;
padding: 8px;
width:100%;
}
.wpcf7-form-control wpcf7-acceptance {width:auto}
.wpcf7-form-control wpcf7-submit {width:30% !important}
input:focus, textarea:focus, select:focus {
border: 1px solid #8DC5C5;
color: #676767;
box-shadow:0 0 4px rgba(82,168,236,.5);
-moz-box-shadow:0 0 4px rgba(82,168,236,.5);
-webkit-box-shadow:0 0 4px rgba(82,168,236,.5);
}
input.submit, input.submit:focus, input.submit:active {
cursor:pointer;
text-align:center;
text-transform: uppercase;
font-size:11px;
font-weight: bold;
line-height: 14px;
color: #fff;
text-decoration:none !important;
padding: 7px;
border: none;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
border-radius:20px;
box-shadow:0 0 0;
-moz-box-shadow:0 0 0;
-webkit-box-shadow:0 0 0;
}
input.submit:hover {
}
a {
-webkit-transition:all 0.14s ease 0s;
-moz-transition:all 0.14s ease 0s;
-o-transition:all 0.14s ease 0s;
outline:none;
}
a:hover {
color: #444;
}
a:visited, a:active {}
.title, .title a {
text-decoration: none;
}
.title a:hover {
}
img, iframe {
max-width:100%;
}
.alignleft {
float:left;
margin: 0px;
width: auto;
margin-right: 10px;
max-width: 20%;
}
.alignright {
float:right;
margin: 10px 0 10px 20px;
}
.aligncenter {
display: block;
margin: 10px auto 10px auto;
}
.text-align-right {
text-align: right;
}
.text-align-left {
text-align: left;
}
.text-align-center {
text-align: center;
}
.divider {
float: left;
width: 100%;
height: 70px;
}
.divider-border {
border-top: 2px solid #eee;
float: left;
width: 100%;
margin: 40px 0;
margin-top: 20px !important;
margin-bottom: 30px !important;
}
/*--------------------------------------------------
MAIN CONTENT
---------------------------------------------------*/
#wrapper {
width: 100%;
min-height: 900px;
height: auto;
}
.content-wrapper {
width: 960px;
margin: 0 auto;
padding: 0 30px;
background-color: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
#header-wrapper {
}
.header {
width: 960px;
padding: 0;
margin: 0;
position:relative;
border-bottom: 2px solid #eee;
margin-bottom: 50px;
}
#contact-fullwidth.header {
border-bottom: none;
margin: 0 auto;
}
#logo {
margin-top: 35px;
}
#logo, #logo a {
float: left;
}
#logo a {
}
/*--------------------------------------------------
PRIMARY MENU
---------------------------------------------------*/
#primary-menu {
float: right;
margin: 0;
padding: 0;
}
#primary-menu select {
display:none;
}
#primary-menu select {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #eee;
cursor: pointer;
width: 100%;
padding: 7px;
margin: 38px 0;
box-shadow:0 0 0 rgba();
-moz-box-shadow:0 0 0 rgba();
-webkit-box-shadow:0 0 0 rgba();
color: #676767;
}
#primary-menu ul {
margin: 0;
padding: 30px 0;
list-style-type: none;
float: right;
}
#primary-menu ul li:hover {
visibility: inherit;
background-color:#444;
}
#primary-menu ul li {
position: relative;
display: inline;
float: left;
margin: 0 0 0 -1px;
/*background: url(../images/sprite.png) no-repeat scroll right -153px transparent;*/
background-color:#444;
}
#primary-menu ul li:last-child {
background: #444;
}
#primary-menu ul li a {
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 200;
color: #ffffff;
padding: 17px 15px;
display: block;
float: left;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
}
#primary-menu ul li a:hover, #primary-menu ul li.sfHover a {
background-color: #4169e1;
color: #fff;
}
#primary-menu .current {
color: #fff !important;
}
#primary-menu ul li a.logo {
display: none;
margin: 0;
}
#primary-menu ul ul {
position: absolute;
top: -9999em;
width: 180px;
background: #4169e1;
z-index: 9999;
}
#primary-menu ul ul li {
width: 100%;
}
#primary-menu ul li:hover ul {
left: 0;
top: 51px;
}
#primary-menu ul li:hover li ul {
top: -9999em;
}
#primary-menu ul li li:hover ul {
left: 180px;
top: 0;
}
#primary-menu ul ul {
padding: 0;
margin: 0;
}
#primary-menu ul ul li {
margin: 0;
background: none;
border-bottom:1px solid #fff;
}
#primary-menu ul ul li:last-child {
border-bottom: none;
}
#primary-menu ul ul li a {
font-size: 11px;
padding: 12px 15px;
}
#primary-menu ul li:hover ul li a {
color: #fff;
width:100%;
}
#primary-menu ul li:hover ul li a:hover {
color: #fff;
background-color:#444;
}
.fixed { position: fixed; top: 0px; z-index:999; height: 59px; }
#header-wrapper .fixed { }
.fixed .header { border-bottom: none; margin-left:-30px; width: 1020px; background-color: #f8f8f8; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);}
.fixed #logo { display:none; }
.fixed .logo2 { position:absolute; left: 30px; top:12px; }
.fixed #primary-menu ul { padding: 0 30px 0 0; }
.fixed #primary-menu ul li ul { padding: 0 0 0 0; }
.fixed #primary-menu ul li { background: url(../images/sprite.png) no-repeat scroll right -149px transparent; }
.fixed #primary-menu ul li:last-child { background: none; }
.fixed #primary-menu ul li a { color: #676767; padding: 21px 15px; }
.fixed #primary-menu ul li a:hover, .fixed #primary-menu ul li.sfHover a { background-color: #444; color: #fff; }
.fixed #primary-menu .current { color: #fff; }
.fixed #primary-menu ul li:hover ul { top: 59px; }
.fixed #primary-menu ul ul li { background: none; }
.fixed #primary-menu ul li:hover ul li a { padding: 12px 15px; background: #444; color:#999; }
.fixed #primary-menu ul li:hover ul li a:hover { color:#fff; }
.fixed #primary-menu ul li ul li ul {
margin-top: -59px;
}
/*--------------------------------------------------
SECTION TITLE
---------------------------------------------------*/
.section-title {
overflow: hidden;
margin: 0 0 30px 0;
padding: 30px 0;
border-bottom: 1px solid #eee;
clear:both;
display:none;
}
.section-title .title, .section-title .title a {
display: inline;
word-spacing: 5px;
}
.section-title h1.title {
font-size:32px;
line-height: 36px;
text-transform: uppercase;
display: block;
margin: 0;
margin-top: 30px;
color: #4169e1;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: bold;
}
.section-title h1.title span {
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: 200;
text-transform: none;
color: #aaa;
}
.section-title p {
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: 200;
font-size: 22px;
line-height: 27px;
}
.section-title .section-nav {
}
.section-title .section-nav ul {
padding: 20px;
margin: 0 auto;
}
/*--------------------------------------------------
FOOTER
---------------------------------------------------*/
#footer {
color: #999;
font-size: 11px;
float: left;
margin-top: 50px;
}
#footer a {
color: #ffffff;
font-weight: bold;
}
#footer a:hover {
color:#4169e1;
}
#footer h3 {
text-transform: uppercase;
font-size: 11px;
font-weight: 400;
color: #fff;
display: block;
}
#footer ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#footer ul li {
margin-bottom:15px;
}
#footer ul li .date {
font: normal 11px/20px Helvetica,Arial,sans-serif;
display: block;
}
#footer-content {
width: 960px;
margin: 0 0 0 -30px;
padding: 0 30px;
background-color: #2F88F0;
}
#footer-bottom, #footer-top {
padding: 35px 0;
overflow: hidden;
position: relative;
}
#footer-bottom {
background-color: #2F88F0;
font-size: 11px;
/*border-top: 1px dotted #777;*/
padding: 25px 25px 18px 25px;
}
#footer-bottom p {
margin-bottom: 0;
}
#footer-bottom a {
}
/*--------------------------------------------------
COLUMNS
---------------------------------------------------*/
.one, .one-half, .two-third, .one-third, .one-fourth { float:left; position:relative; margin-right:2%; }
.one { width: 100%; margin-right: 0; margin-top:40px; }
.one-half { width: 48%; text-align: center;}
.two-third { width: 65.33%; }
.one-third { width: 30.66%; }
.one-fourth { width: 22%; }
.last { margin-right: 0 !important; }
/*--------------------------------------------------
TEAM
---------------------------------------------------*/
.team {
background-color: #f8f8f8;
position: relative;
}
.team-member-info {
padding: 15px;
overflow: hidden;
}
.team-member-info ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.team-member-info li {
display: inline;
}
.team-member-info h2 {
font-size: 14px;
font-weight: bold;
line-height: 20px;
}
.team-member-info h3 {
font-size:11px;
text-transform: uppercase;
line-height: 17px;
}
.team-member-info p {
margin-top: 13px;
}
.team-member-info img {
}
div.arrow {
background: url(../images/sprite.png) no-repeat 0 -128px transparent;
height: 6px;
width: 12px;
margin: -10px 0 0 17px;
position: relative;
}
.team-member-info h2, .team-member-info h3, .team-member-info p {
margin-bottom: 0;
}
.team-member-info .social-personal {
margin-top: 13px;
padding-top: 13px;
border-top: 1px dotted #CCCCCC;
}
.team-member-info .social-personal li {
display: inline;
float: left;
}
.team-member-info .social-personal li a {
padding: 0 5px;
font-size: 11px;
color: #676767;
}
.team-member-info .social-personal li a:hover {
color:#fff;
}
.team-member-info .social-personal li span {
font-size: 10px;
}
/*--------------------------------------------------
PHOTOSTREAM
---------------------------------------------------*/
.photostream-wrapper, #footer .photostream-wrapper {
float: left;
}
.photostream ul, #footer .photostream ul, .widget .photostream ul {
list-style-type: none;
padding: 0;
margin: 0;
margin-left: -10px;
}
.photostream ul li, #footer .photostream ul li, .widget .photostream ul li {
width: auto;
float: left;
margin: 0 0 10px 10px;
}
.photostream a, #footer .photostream a, .photostream img, #footer .photostream img {
height: 40px;
width: 40px;
}
.photostream a, #footer .photostream a {
border: 1px solid #eee;
padding: 4px;
display: block;
}
#footer .photostream a {
border: 1px solid #555;
}
#footer .photostream a {
}
.photostream a:hover, #footer .photostream a:hover {
}
.photostream img, #footer .photostream img {
opacity:0.7;
filter:alpha(opacity=70);
}
.photostream a:hover img, #footer .photostream a:hover img {
opacity:1;
filter:alpha(opacity=100);
}
/*--------------------------------------------------
SERVICES GRAPH
---------------------------------------------------*/
.skills-graph {
display: block;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.skills-graph li, .skills-graph li span {
-moz-border-radius: 300px 300px 300px 300px;
-webkit-border-radius: 300px 300px 300px 300px;
border-radius: 300px 300px 300px 300px;
}
.skills-graph li {
margin-bottom: 10px;
font-size: 11px;
text-transform: uppercase;
}
.skills-graph li p {
margin-bottom: 0;
}
.skills-graph li strong {
margin-left: 5px;
color: #444;
}
.skills-graph li span {
height: 13px;
}
/*--------------------------------------------------
GRID VIEW
---------------------------------------------------*/
.grid {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
.grid li {
float: left;
border-bottom: 1px dashed #ddd;
border-right: 1px dashed #ddd;
}
.grid.row3 li {
width: 319px;
}
.grid.row4 li {
width: 48%;
float:left;
}
.grid.row5 li {
width: 191px;
}
.grid.row6 li {
width: 159px;
}
.grid li.last {
border-right: none;
}
.grid li.last-row {
border-bottom: none;
}
.grid img {
display: block;
margin: 0 auto;
}
.services div {
padding: 15px 10px;
text-align: center;
}
.services div a {
color: #676767;
}
.services div:hover, .services div:hover a {
color: #FFFFFF;
}
.services div:hover a {
background-color:#444;
}
.services img, .services h2 {
display: block;
margin-bottom: 20px;
}
.services h2 {
font-size:15px;
line-height: 20px;
font-weight: 700;
text-transform: uppercase;
}
.clients img {
-moz-transition:all 0.14s ease 0s;
-webkit-transition:all 0.14s ease 0s;
-o-transition:all 0.14s ease 0s;
opacity:0.5;
filter:alpha(opacity=50);
}
.clients img:hover {
opacity:1;
filter:alpha(opacity=100);
}
/*--------------------------------------------------
BUTTONS
---------------------------------------------------*/
.button {
cursor:pointer;
text-align:center;
display:inline-block;
margin-right: 5px;
margin-bottom: 5px;
-moz-border-radius: 2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.button.right {
float:right;
}
.button, .button:hover {
font-weight: bold;
color: #FFFFFF;
text-transform:uppercase;
}
.button:hover {
}
.small {
padding:0 6px;
font-size: 11px;
line-height: 16px;
}
.medium {
font-size:11px;
padding: 7px 14px !important;
}
.large {
padding: 11px 19px 11px 19px !important;
font-size: 17px;
}
.rounded {
-moz-border-radius: 20px;
-webkit-border-radius:20px;
border-radius:20px;
}
.grey { background-color:#444; }
.yellow { background-color:#FEEB43; color: #707070; }
.orange { background-color:#d80c1b; }
.green { background-color:#78d18b; }
.tealgreen { background-color:#3ea9a1; }
.blue { background-color: #7CC0CB; }
.navyblue { background-color: #657383; }
.purple { background-color:#9a86a2; }
.magenta {background-color:#C25283; }
.pink { background-color:#F9A7B0; }
.red { background-color:#2F88F0; }
.cream { background-color:#C9C299; }
/*--------------------------------------------------
HIGHLIGHTS
---------------------------------------------------*/
.highlight1 {
color: #FFFFFF;
padding: 0 2px;
}
.highlight2 {
background-color: #444;
color: #FFFFFF;
padding: 0 2px;
}
.highlight3 {
border-bottom: 1px dotted;
}
/*--------------------------------------------------
DROPCAPS
---------------------------------------------------*/
.dropcap1 {
float: left;
font-size: 53px;
line-height: 50px;
color: #444;
margin: 0 8px 0 0;
font-weight: bold;
}
.dropcap2 {
background-color: #444;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: block;
float: left;
font-size: 24px;
line-height: 32px;
margin: 6px 8px 0 0;
padding: 5px 0;
text-align: center;
width: 44px;
}
.dropcap3 {
background-color: #444;
border-radius: 55px 55px 55px 55px;
color: #FFFFFF;
display: block;
float: left;
font-size: 24px;
line-height: 44px;
margin: 6px 8px 0 0;
text-align: center;
width: 44px;
}
/*--------------------------------------------------
DIFFERENT UL STYLES
---------------------------------------------------*/
.check-list ul, .arrow-list ul, .star-list ul {
list-style-type:none;
margin: 0px;
padding: 0px;
display: block;
}
.check-list ul li, .arrow-list ul li, .star-list ul li {
margin-bottom: 5px;
padding-left: 20px;
}
.arrow-list ul li {
background: url(../images/bullet-ul.png) no-repeat scroll -82px 5px transparent;
}
.check-list ul li {
background: url(../images/bullet-ul.png) no-repeat scroll -42px -45px transparent;
}
.star-list ul li {
background: url(../images/bullet-ul.png) no-repeat scroll 0px -82px transparent;
}
.colored-counter-list ul {
counter-reset:li;
margin-left:0;
padding-left:0;
}
.colored-counter-list ul > li {
position:relative;
list-style:none;
padding-left: 35px;
margin-bottom: 13px;
font-size: 1.5em;
line-height: 1.5;
font-weight: 300 !important;
text-align: justify;;
}
.colored-counter-list ul > li:before {
content:counter(li);
counter-increment:li;
position:absolute;
top:0;
left:0;
width:25px;
margin-right:8px;
padding: 3px 0;
text-align:center;
-moz-border-radius: 2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color: #2F88F0;
color: #fff;
}
/*--------------------------------------------------
TOGGLE
---------------------------------------------------*/
.toggle-wrap {
float: left;
width: 100%;
margin-bottom: 6px;
}
.trigger {
}
.trigger a {
display: block;
padding: 10px;
padding-left: 15px;
text-decoration: none;
font-weight: bold;
color: #676767;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.17);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.17);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.17);
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
background: url(../images/bullet-toggle.png) no-repeat right 15px #f8f8f8;
}
.trigger.active a {
background: url(../images/bullet-toggle.png) no-repeat right -20px #f8f8f8;
}
.toggle-container {
overflow: hidden;
float: left;
padding: 15px;
}
/*--------------------------------------------------
ACCORDION
---------------------------------------------------*/
.trigger-button {
float: left;
width: 100%;
padding: 10px 0 10px 0;
margin-bottom: 6px;
text-decoration: none;
font-weight: 300;
font-size: 1.2em;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.17);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.17);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.17);
background: url(../images/bullet-toggle.png) no-repeat right 15px #f8f8f8;
cursor:pointer;
}
.trigger-button span {
padding-left: 15px;
}
.trigger-button.active {
background: url(../images/bullet-toggle.png) no-repeat right -20px #f8f8f8;
}
.accordion {
float: left;
padding: 8px 15px 22px 15px;
width: 100%;
}
.accordion h2 {display: none;}
.ranking {margin-bottom: 20px; margin-top: 20px;}
/*--------------------------------------------------
PORTFOLIO
---------------------------------------------------*/
.portfolio-grid ul li a.hide {
display: none;
}
.portfolio-grid {
width: 965px;
margin: 0 0 0 -5px;
padding: 0;
float: left;
}
.portfolio-grid ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.portfolio-grid ul li {
float: left;
margin: 0 0 5px 5px;
padding: 0;
position: relative;
background-color: #f8f8f8;
}
.isotope-item {
z-index: 1;
}
.isotope-hidden {
z-index: 0;
}
.portfolio-grid ul li.col2 {
width: 477px;
}
.portfolio-grid ul li.col3 {
width: 316px;
}
.portfolio-grid ul li.col4 {
width: 236px;
}
.portfolio-grid ul li img {
float: left;
}
.item-info {
padding: 15px;
float: left;
}
.item-info h3, .item-info-overlay h3 {
font-size: 15px;
font-style: normal;
font-weight: 300;
line-height: 17px;
margin-bottom: 0;
}
.item-info h3.title a {
color: #676767;
}
.item-info-overlay h3.title a {
color: #fff;
}
.item-info-overlay h3.title a:hover {
color: #444;
}
.item-info h4, .item-info-overlay h4 {
font-size:11px;
line-height: 14px;
color: #444;
text-transform: uppercase;
margin-bottom: 0;
}
/*--------------------------------------------------
PORTFOLIO THUMBNAIL HOVER
---------------------------------------------------*/
.item-info-overlay {
color: #fff;
font-size:11px;
}
.item-info-overlay {
position:absolute;
width:100%;
height:100%;
left: 0;
top: 0;
display: none;
z-index: 120;
}
.item-info-overlay div {
padding: 0 9% 9% 9%;
}
.item-info-overlay h3 {
padding: 9% 9% 2% 9%;
font-size: 17px;
}
.item-info-overlay p {
margin-top: 10px;
padding-top: 10px;
}
.item-info-overlay a.preview, .item-info-overlay a.view {
position: absolute;
bottom: 0px;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
text-indent: -9999px;
height: 37px;
width: 37px;
z-index: 110;
}
.item-info-overlay a.view {
background: url(../images/sprite.png) no-repeat scroll 11px 13px #333;
right: 0px;
}
.item-info-overlay a.view:hover {
background: url(../images/sprite.png) no-repeat scroll 11px -18px #333;
}
.item-info-overlay a.preview {
background: url(../images/sprite.png) no-repeat scroll 12px -50px #333;
right: 38px;
}
.item-info-overlay a.preview:hover {
background: url(../images/sprite.png) no-repeat scroll 12px -83px #333;
}
/*--------------------------------------------------
SHAPED STYLE ITEM
---------------------------------------------------*/
.portfolio-grid ul.shaped li {
margin: 0 0 15px 5px;
background-color: transparent;
}
.shaped .item-container {
display: block;
position: relative;
}
.shaped .item-mask {
position: absolute;
left: 0;
top: 0;
z-index: 99;
}
.shaped .item-container img {
z-index:9;
}
.shaped .item-info-overlay {
text-align: center;
}
.shaped .item-info-overlay a.preview, .shaped .item-info-overlay a.view {
bottom: 30px;
height: 30px;
width:30px;
}
.shaped .item-info-overlay a.view {
background: url(../images/sprite.png) no-repeat scroll 7px 10px #333;
right: 88px;
}
.shaped .item-info-overlay a.view:hover {
background: url(../images/sprite.png) no-repeat scroll 7px -21px #333;
}
.shaped .item-info-overlay a.preview {
background: url(../images/sprite.png) no-repeat scroll 9px -53px #333;
right: 119px;
}
.shaped .item-info-overlay a.preview:hover {
background: url(../images/sprite.png) no-repeat scroll 9px -86px #333;
}
/*--------------------------------------------------
HEXAGON STYLE
---------------------------------------------------*/
.hexagon .item-container {
width: 236px;
height: 257px;
overflow:hidden;
}
.hexagon .item-mask {
background: url(../images/mask-hexagon.png) no-repeat 0 0 transparent;
width: 236px;
height: 257px;
}
.hexagon .item-container img {
height: 257px;
}
.hexagon .item-info-overlay {
background: url(../images/mask-hexagon.png) no-repeat 0 0;
}
.hexagon .item-info-overlay h3 {
padding: 30% 0% 2% 0%;
}
/*--------------------------------------------------
CIRCLE STYLE
---------------------------------------------------*/
.circle .item-container {
width: 236px;
height: 232px;
overflow:hidden;
}
.circle .item-mask {
background: url(../images/mask-circle.png) no-repeat 0 0 transparent;
width: 236px;
height: 232px;
}
.circle .item-container img {
height: 232px;
}
.circle .item-info-overlay {
background: url(../images/mask-circle.png) no-repeat 0 0;
}
.circle .item-info-overlay div {
padding: 9%;
}
.circle .item-info-overlay h3 {
padding: 9% 9% 2% 9%;
}
/*--------------------------------------------------
TRIANGLE STYLE
---------------------------------------------------*/
.triangle .item-container {
width: 316px;
height: 272px;
overflow:hidden;
}
.triangle .item-mask {
background: url(../images/mask-triangle.png) no-repeat 0 0 transparent;
width: 316px;
height: 272px;
}
.triangle .item-container img {
height: 272px;
}
.triangle .item-info-overlay {
background: url(../images/mask-triangle.png) no-repeat 0 0;
}
.triangle .item-info-overlay div {
padding: 19%;
}
.triangle .item-info-overlay h3 {
padding: 18% 14% 2% 14%;
}
.item-info-overlay p {
margin-top: 5px;
padding-top: 5px;
}
.shaped.triangle .item-info-overlay a.preview, .shaped.triangle .item-info-overlay a.view {
bottom: 10px;
}
.shaped.triangle .item-info-overlay a.preview {
right: 54px;
}
.shaped.triangle .item-info-overlay a.view {
right: 23px;
}
/*--------------------------------------------------
PORTFOLIO FILTERABLE NAVIGATION
---------------------------------------------------*/
.filterable {
width: 100%;
float: left;
padding-bottom: 25px;
}
.filterable ul {
margin: 0 auto;
}
.filterable li {
background: none;
display: inline;
float: left;
}
.filterable li:last-child {
background: none;
}
.filterable li:last-child a {
margin: 0 0 0 7px;
}
.filterable li a {
font-size: 11px;
color: #aaa;
line-height: 16px;
text-transform: uppercase;
text-decoration: none;
float: left;
margin:0 5px;
padding:0 3px;
-moz-border-radius: 2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.filterable li a:hover {
color: #444;
}
.filterable li.current a {
color:#444;
}
.filterable li span {
font-size: 11px;
color: #ccc;
}
/*--------------------------------------------------
ITEM NAVIGATION
---------------------------------------------------*/
ul.item-nav {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
ul.item-nav li {
float: left;
margin-left: 1px;
background: #444;
-webkit-transition:all 0.14s ease 0s;
-moz-transition:all 0.14s ease 0s;
-o-transition:all 0.14s ease 0s;
}
ul.item-nav li a {
background: url(../images/sprite.png) no-repeat scroll 0 0 transparent;
display: block;
height: 45px;
width: 45px;
text-indent: -9999px;
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
}
ul.item-nav li:hover {
}
ul.item-nav li.prev a {
background-position: 17px -212px;
}
ul.item-nav li.next a {
background-position: 17px -282px;
}
ul.item-nav li.all a {
background-position: 12px -247px;
}
/*--------------------------------------------------
CONTACT MODAL WINDOW
---------------------------------------------------*/
#wrapper.fullwidth {
margin-bottom: 40px;
}
.google-map.fullwidth {
height: 700px;
width: 1020px;
z-index:9;
top: 0px;
margin: -4px 0 0 -30px;
}
#contact-mask {
display: none;
background: #fff;
position: fixed; left: 0; top: 0;
z-index: 10;
width: 100%;
height: 100%;
opacity: 0.9;
z-index: 999;
}
#contact-intro {
width: 960px;
margin: 0 auto;
padding: 45px 0 0 0;
overflow: hidden;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
}
#contact-intro h1.title {
font-size:22px;
line-height: 28px;
font-weight: 700;
text-transform: uppercase;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
}
#contact-intro p {
font-weight: 300;
font-size: 20px;
line-height: 1.3;
font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif;
}
.contact-button {
margin-top: 45px;
}
.contact-popup {
display:none;
position: absolute;
top: 50%;
left: 50%;
z-index: 99999;
width: 960px;
padding:30px;
background-color: #444444;
color: #fff;
}
.contact-popup .form {
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
color: #444;
}
.contact-popup .close {
position: absolute;
top: 40px;
right: 0px;
padding-top: 2px;
}
/*--------------------------------------------------
CONTACT
---------------------------------------------------*/
.google-map {
height: 300px;
width: 100%;
}
.form, .contact-success {
background-color: #fff;
overflow: hidden;
}
.contact-success {
padding: 20px;
color: #fff;
font-size:11px;
}
.form ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.form li {
position: relative;
}
.form input, .form textarea, #recaptcha_response_field, .form select {
width: 85%;
position: relative;
}
.form select {
width: auto;
}
.form textarea {
width: 96%;
height: 150px;
}
.form input.submit {
width: 110px;
}
.form li p, .form input.submit {
margin-bottom: 0;
}
.form em {
color:#aaaaaa;
display: inline;
font-size: 11px;
font-style: normal;
font-weight: bold;
}
.form .contact-error {
color: #f96e5b;
font-size: 11px;
font-weight: bold;
position: absolute;
top: 0;
right: 60px;
}
.contact-info {
list-style-type: none;
padding: 0;
margin: 0;
}
.extra-padding{
padding-top:12px !important;
}
/*--------------------------------------------------
PANEL
---------------------------------------------------*/
#panel {
position: fixed;
top: 70px;
z-index: 999;
}
#panel-admin {
float: left;
width: 170px;
padding: 20px;
background: #333;
color: #999999;
}
.open{
background: url(../images/style-panel-button.png) no-repeat 0 0 transparent;
display: block;
height: 190px;
width: 33px;
float: right;
}
#panel-admin select, #panel-admin select:focus {
width: 100%;
padding: 3px;
margin: 10px 0 15px 0;
font-size: 12px;
border: none;
background-color: #fff;
}
.wp-caption{}
.wp-caption-text{}
.sticky{}
.gallery-caption{}
.bypostauthor{}
/*-------------------------------------------------------------- CODICE AGGIUNTO -------------------
-----------------------------------------*/
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon/icomoon.eot');
src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon/icomoon.woff') format('woff'),
url('../fonts/icomoon/icomoon.ttf') format('truetype'),
url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* General button style (reset) */
.btn {
border: none;
font-family: inherit;
font-size: inherit;
color: inherit;
background: none;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px 30px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
outline: none;
position: relative;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* Pseudo elements for icons */
.btn:before,
.icon-heart:after,
.icon-star:after,
.icon-plus:after,
.icon-file:before {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
position: relative;
-webkit-font-smoothing: antialiased;
}
.icon-envelope:before {
content: "\e000";
}
.icon-cart:before {
content: "\e007";
}
.icon-cart-2:before {
content: "\e008";
}
.icon-heart:before {
content: "\e009";
}
/* Filled heart */
.icon-heart:after,
.icon-heart-2:before {
content: "\e00a";
}
.icon-star:before {
content: "\e00b";
}
/* Filled star */
.icon-star:after,
.icon-star-2:before {
content: "\e00c";
}
.icon-arrow-right:before {
content: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2014/10/penna.png);
}
.icon-arrow-left:before {
content: "\e003";
}
.icon-truck:before {
content: "\e00e";
}
.icon-remove:before {
content: "\e00f";
}
.icon-cog:before {
content: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2014/10/gear_small.png);
}
.icon-plus:before,
.icon-plus:after {
content: "\e011";
}
.icon-minus:before {
content: "\e012";
}
.bh-icon-smiley:before {
content: "\e001";
}
.bh-icon-sad:before {
content: "\e002";
}
.icon-file:before {
content: "\e004";
}
.icon-remove-2:before {
content: "\e005";
}
/* Button 1 */
.btn-1 {
border: 3px solid #fff;
color: #fff;
}
/* Button 1a */
.btn-1a:hover,
.btn-1a:active {
color: #0e83cd;
background: #fff;
}
/* Button 1b */
.btn-1b:after {
width: 100%;
height: 0;
top: 0;
left: 0;
background: #fff;
}
.btn-1b:hover,
.btn-1b:active {
color: #0e83cd;
}
.btn-1b:hover:after,
.btn-1b:active:after {
height: 100%;
}
/* Button 1c */
.btn-1c:after {
width: 0%;
height: 100%;
top: 0;
left: 0;
background: #fff;
}
.btn-1c:hover,
.btn-1c:active {
color: #0e83cd;
}
.btn-1c:hover:after,
.btn-1c:active:after {
width: 100%;
}
/* Button 1d */
.btn-1d {
overflow: hidden;
}
.btn-1d:after {
width: 0;
height: 103%;
top: 50%;
left: 50%;
background: #fff;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.btn-1d:hover,
.btn-1d:active {
color: #0e83cd;
}
.btn-1d:hover:after {
width: 90%;
opacity: 1;
}
.btn-1d:active:after {
width: 101%;
opacity: 1;
}
/* Button 1e */
.btn-1e {
overflow: hidden;
}
.btn-1e:after {
width: 100%;
height: 0;
top: 50%;
left: 50%;
background: #fff;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.btn-1e:hover,
.btn-1e:active {
color: #0e83cd;
}
.btn-1e:hover:after {
height: 260%;
opacity: 1;
}
.btn-1e:active:after {
height: 400%;
opacity: 1;
}
/* Button 1f */
.btn-1f {
overflow: hidden;
}
.btn-1f:after {
width: 101%;
height: 0;
top: 50%;
left: 50%;
background: #fff;
opacity: 0;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.btn-1f:hover,
.btn-1f:active {
color: #0e83cd;
}
.btn-1f:hover:after {
height: 75%;
opacity: 1;
}
.btn-1f:active:after {
height: 130%;
opacity: 1;
}
/* Button 2 */
.btn-2 {
background: #cb4e4e;
color: #fff;
box-shadow: 0 6px #ab3c3c;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
/* Button 2a */
.btn-2a {
border-radius: 0 0 5px 5px;
}
.btn-2a:hover {
box-shadow: 0 4px #ab3c3c;
top: 2px;
}
.btn-2a:active {
box-shadow: 0 0 #ab3c3c;
top: 6px;
}
/* Button 2b */
.btn-2b {
border-radius: 0 0 5px 5px;
}
.btn-2b:hover {
box-shadow: 0 8px #ab3c3c;
top: -2px;
}
.btn-2b:active {
box-shadow: 0 0 #ab3c3c;
top: 6px;
}
/* Button 2c */
.btn-2c {
border-radius: 5px;
}
.btn-2c:hover {
box-shadow: 0 4px #ab3c3c;
top: 2px;
}
.btn-2c:active {
box-shadow: 0 0 #ab3c3c;
top: 6px;
}
/* Button 2d */
.btn-2d {
border-radius: 5px;
}
.btn-2d:hover {
box-shadow: 0 8px #ab3c3c;
top: -2px;
}
.btn-2d:active {
box-shadow: 0 0 #ab3c3c;
top: 6px;
}
/* Button 2e */
.btn-2e {
border-radius: 5px;
box-shadow: -6px 0 #ab3c3c;
}
.btn-2e:hover {
box-shadow: -4px 0 #ab3c3c;
left: -2px;
}
.btn-2e:active {
box-shadow: 0 0 #ab3c3c;
left: -6px;
}
/* Button 2f */
.btn-2f {
border-radius: 5px;
box-shadow: 6px 0 #ab3c3c;
}
.btn-2f:hover {
box-shadow: 4px 0 #ab3c3c;
left: 2px;
}
.btn-2f:active {
box-shadow: 0 0 #ab3c3c;
left: 6px;
}
/* Button 2g */
.btn-2g {
border-radius: 40px;
}
.btn-2g:hover {
box-shadow: 0 4px #ab3c3c;
top: 2px;
}
.btn-2g:active {
box-shadow: 0 0 #ab3c3c;
top: 6px;
}
/* Button 2h */
.btn-2h {
border-radius: 20px;
}
.btn-2h:hover {
box-shadow: 0 4px #ab3c3c;
top: 2px;
}
.btn-2h:active {
box-shadow: 0 0 #ab3c3c;
top: 6px;
}
/* Button 2i */
.btn-2i {
border-radius: 50%;
width: 90px;
height: 90px;
padding: 0;
}
.btn-2i:hover {
box-shadow: 0 4px #ab3c3c;
top: 2px;
}
.btn-2i:active {
box-shadow: 0 0 #ab3c3c;
top: 6px;
}
/* Button 2j */
.btn-2j {
border-radius: 50%;
width: 90px;
height: 90px;
padding: 0;
}
.btn-2j:hover {
box-shadow: 0 8px #ab3c3c;
top: -2px;
}
.btn-2j:active {
box-shadow: 0 0 #ab3c3c;
top: 6px;
}
/* Button 3 */
.btn-3 {
background: #d80c1b;
color: #fff;
}
.btn-3:hover {
background: #e3001b;
}
.btn-3:active {
background: #d80c1b;
}
.btn-3:before {
position: absolute;
height: 100%;
left: 0;
top: 0;
line-height: 3;
font-size: 140%;
width: 100px;
padding-top:25px;
}
/* Button 3a */
.btn-3a {
padding: 25px 60px 25px 120px;
}
.btn-3a:before {
background: rgba(0,0,0,0.05);
}
/* Button 3b */
.btn-3b {
padding: 25px 60px 25px 120px;
border-radius: 10px;
}
.btn-3b:before {
border-right: 2px solid rgba(255,255,255,0.5);
}
/* Button 3c */
.btn-3c {
padding: 80px 20px 20px 20px;
border-radius: 10px;
box-shadow: 0 3px #da9622;
}
.btn-3c:active {
box-shadow: 0 3px #dc7801;
}
.btn-3c:before {
height: 60px;
width: 100%;
line-height: 60px;
background: #fff;
color: #f29e0d;
border-radius: 10px 10px 0 0;
}
.btn-3c:active:before {
color: #f58500;
}
/* Button 3d */
.btn-3d {
padding: 45px 80px 45px 180px;
border-radius: 10px;
font-size:18px;
font-family: "Oswald", Helvetica, sans-serif;
}
.btn-3d:before {
background: #444;
color: #fcad26;
z-index: 2;
border-radius: 10px 0 0 10px;
padding-top:35px;
}
.btn-3d:after {
width: 40px;
height: 40px;
background: #444;
z-index: 1;
left: 80px;
top: 45%;
margin: -10px 0 0 -10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.btn-3d:active:before {
color: #f58500;
}
.btn-3d:active {
top: 0;
}
.btn-3d:active:after {
left: 90px;
}
/* Button 3e */
.btn-3e {
padding: 45px 200px 45px 80px;
overflow: hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
font-size:18px;
font-family: "Oswald", Helvetica, sans-serif;
}
.btn-3e:before {
left: auto;
right: 10px;
z-index: 2;
}
.btn-3e:after {
width: 30%;
height: 200%;
background: rgba(255,255,255,0.1);
z-index: 1;
right: 0;
top: 0;
margin: -5px 0 0 -5px;
-webkit-transform-origin: 0 0;
-webkit-transform: rotate(-20deg);
-moz-transform-origin: 0 0;
-moz-transform: rotate(-20deg);
-ms-transform-origin: 0 0;
-ms-transform: rotate(-20deg);
transform-origin: 0 0;
transform: rotate(-20deg);
}
.btn-3e:hover:after {
width: 40%;
}
/* Button 4 */
.btn-4 {
border-radius: 50px;
border: 3px solid #fff;
color: #fff;
overflow: hidden;
}
.btn-4:active {
border-color: #17954c;
color: #17954c;
}
.btn-4:hover {
background: #24b662;
}
.btn-4:before {
position: absolute;
height: 100%;
font-size: 125%;
line-height: 3.5;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-4:active:before {
color: #17954c;
}
/* Button 4a */
.btn-4a:before {
left: 130%;
top: 0;
}
.btn-4a:hover:before {
left: 80%;
}
/* Button 4b */
.btn-4b:before {
left: -50%;
top: 0;
}
.btn-4b:hover:before {
left: 10%;
}
/* Button 4c */
.btn-4c:before {
left: 70%;
opacity: 0;
top: 0;
}
.btn-4c:hover:before {
left: 80%;
opacity: 1;
}
/* Button 4d */
.btn-4d:before {
left: 30%;
opacity: 0;
top: 0;
}
.btn-4d:hover:before {
left: 10%;
opacity: 1;
}
/* Button 5 */
.btn-5 {
background: #823aa0;
color: #fff;
height: 70px;
min-width: 260px;
line-height: 24px;
font-size: 16px;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.btn-5:active {
background: #9053a9;
top: 2px;
}
.btn-5 span {
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.3s;
-moz-backface-visibility: hidden;
transition: all 0.3s;
backface-visibility: hidden;
}
.btn-5:before {
position: absolute;
height: 100%;
width: 100%;
line-height: 2.5;
font-size: 180%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.btn-5:active:before {
color: #703b87;
}
/* Button 5a */
.btn-5a:hover span {
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
transform: translateY(300%);
}
.btn-5a:before {
left: 0;
top: -100%;
}
.btn-5a:hover:before {
top: 0;
}
/* Button 5b */
.btn-5b:hover span {
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
transform: translateX(200%);
}
.btn-5b:before {
left: -100%;
top: 0;
}
.btn-5b:hover:before {
left: 0;
}
/* Button 6 */
.btn-6 {
color: #fff;
background: #226fbe;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.btn-6:active {
top: 2px;
}
/* Button 6a */
.btn-6a {
border: 4px solid #226fbe;
}
.btn-6a:hover {
background: transparent;
color: #226fbe;
}
/* Button 6b */
.btn-6b {
border: 4px solid #226fbe;
border-radius: 15px;
}
.btn-6b:hover {
background: transparent;
color: #226fbe;
}
/* Button 6c */
.btn-6c {
border: 4px solid #226fbe;
border-radius: 60px;
}
.btn-6c:hover {
background: transparent;
color: #226fbe;
}
/* Button 6d */
.btn-6d {
border: 2px dashed #226fbe;
}
.btn-6d:hover {
background: transparent;
color: #226fbe;
}
/* Button 6e */
.btn-6e {
border: 2px dashed #226fbe;
border-radius: 15px;
}
.btn-6e:hover {
background: transparent;
color: #226fbe;
}
/* Button 6f */
.btn-6f {
border: 2px dashed #226fbe;
border-radius: 60px;
}
.btn-6f:hover {
background: transparent;
color: #226fbe;
}
/* Button 6g */
.btn-6g {
border: 2px dotted #226fbe;
}
.btn-6g:hover {
background: transparent;
color: #226fbe;
}
/* Button 6h */
.btn-6h {
border: 2px dotted #226fbe;
border-radius: 15px;
}
.btn-6h:hover {
background: transparent;
color: #226fbe;
}
/* Button 6i */
.btn-6i {
border: 2px dotted #226fbe;
border-radius: 60px;
}
.btn-6i:hover {
background: transparent;
color: #226fbe;
}
/* Button 6j */
.btn-6j {
border: 4px double #226fbe;
}
.btn-6j:hover {
background: transparent;
color: #226fbe;
}
/* Button 6k */
.btn-6k {
border: 4px double #226fbe;
border-radius: 15px;
}
.btn-6k:hover {
background: transparent;
color: #226fbe;
}
/* Button 6l */
.btn-6l {
border: 4px double #226fbe;
border-radius: 60px;
}
.btn-6l:hover {
background: transparent;
color: #226fbe;
}
/* Button 7 */
.btn-7 {
background: #17aa56;
color: #fff;
border-radius: 7px;
box-shadow: 0 5px #119e4d;
padding: 25px 60px 25px 90px;
}
/* Button 7a */
.btn-7a {
overflow: hidden;
}
.btn-7a:before {
position: absolute;
left: 0;
width: 40%;
font-size: 160%;
line-height: 0.8;
color: #0a833d;
}
.btn-7a.btn-activated {
-webkit-animation: fadeOutText 0.5s;
-moz-animation: fadeOutText 0.5s;
animation: fadeOutText 0.5s;
}
.btn-7a.btn-activated:before {
-webkit-animation: moveToRight 0.5s;
-moz-animation: moveToRight 0.5s;
animation: moveToRight 0.5s;
}
@-webkit-keyframes fadeOutText {
0% { color: transparent; }
80% { color: transparent; }
100% { color: #fff; }
}
@-moz-keyframes fadeOutText {
0% { color: transparent; }
80% { color: transparent; }
100% { color: #fff; }
}
@keyframes fadeOutText {
0% { color: transparent; }
80% { color: transparent; }
100% { color: #fff; }
}
@-webkit-keyframes moveToRight {
80% { -webkit-transform: translateX(250%); }
81% { opacity: 1; -webkit-transform: translateX(250%); }
82% { opacity: 0; -webkit-transform: translateX(250%); }
83% { opacity: 0; -webkit-transform: translateX(-50%); }
84% { opacity: 1; -webkit-transform: translateX(-50%); }
100% { -webkit-transform: translateX(0%); }
}
@-moz-keyframes moveToRight {
80% { -moz-transform: translateX(250%); }
81% { opacity: 1; -moz-transform: translateX(250%); }
82% { opacity: 0; -moz-transform: translateX(250%); }
83% { opacity: 0; -moz-transform: translateX(-50%); }
84% { opacity: 1; -moz-transform: translateX(-50%); }
100% { -moz-transform: translateX(0%); }
}
@keyframes moveToRight {
80% { transform: translateX(250%); }
81% { opacity: 1; transform: translateX(250%); }
82% { opacity: 0; transform: translateX(250%); }
83% { opacity: 0; transform: translateX(-50%); }
84% { opacity: 1; transform: translateX(-50%); }
100% { transform: translateX(0%); }
}
/* Button 7b */
.btn-7b {
overflow: hidden;
}
.btn-7b:before {
position: absolute;
left: 0;
width: 40%;
font-size: 160%;
line-height: 0.8;
color: #0a833d;
}
.btn-7b.btn-activated:before {
-webkit-animation: scaleUp 0.5s;
-moz-animation: scaleUp 0.5s;
animation: scaleUp 0.5s;
}
@-webkit-keyframes scaleUp {
80% {
opacity: 0;
-webkit-transform: scale(2);
}
100% {
opacity: 0;
-webkit-transform: scale(2);
}
}
@-moz-keyframes scaleUp {
80% {
opacity: 0;
-moz-transform: scale(2);
}
100% {
opacity: 0;
-moz-transform: scale(2);
}
}
@keyframes scaleUp {
80% {
opacity: 0;
transform: scale(2);
}
100% {
opacity: 0;
transform: scale(2);
}
}
/* Icon only style */
.btn-icon-only {
font-size: 0;
padding: 25px 30px;
}
.btn-icon-only:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 26px;
line-height: 54px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Button 7c */
.btn-7c {
overflow: hidden;
}
.btn-7c:before {
color: #fff;
z-index: 1;
}
.btn-7c:after {
position: absolute;
top: 0;
left: 0;
height: 100%;
z-index: 0;
width: 0;
background: #0a833d;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.btn-7c.btn-activated:after {
-webkit-animation: fillToRight 0.7s forwards;
-moz-animation: fillToRight 0.7s forwards;
animation: fillToRight 0.7s forwards;
}
@-webkit-keyframes fillToRight {
to {
width: 100%;
}
}
@-moz-keyframes fillToRight {
to {
width: 100%;
}
}
@keyframes fillToRight {
to {
width: 100%;
}
}
/* Button 7d */
.btn-7d {
overflow: hidden;
}
.btn-7d:before {
color: #fff;
z-index: 1;
}
.btn-7d:after {
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
z-index: 0;
background: #21bb63;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.btn-7d.btn-activated:after {
-webkit-animation: emptyBottom 0.7s forwards;
-moz-animation: emptyBottom 0.7s forwards;
animation: emptyBottom 0.7s forwards;
}
@-webkit-keyframes emptyBottom {
to {
height: 100%;
}
}
@-moz-keyframes emptyBottom {
to {
height: 100%;
}
}
@keyframes emptyBottom {
to {
height: 100%;
}
}
/* Button 7e */
.btn-7e:after {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
font-size: 26px;
line-height: 54px;
color: #ea515e;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.btn-7e.btn-activated:after {
-webkit-animation: scaleFade 0.5s forwards;
-moz-animation: scaleFade 0.5s forwards;
animation: scaleFade 0.5s forwards;
}
@-webkit-keyframes scaleFade {
50% {
opacity: 1;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(2.5);
}
}
@-moz-keyframes scaleFade {
50% {
opacity: 1;
-moz-transform: scale(1);
}
100% {
opacity: 0;
-moz-transform: scale(2.5);
}
}
@keyframes scaleFade {
50% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(2.5);
}
}
/* Button 7f */
.btn-7f:before {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
}
.btn-7f:after {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
font-size: 26px;
line-height: 54px;
color: #ffe44d;
visibility: hidden;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ffe44d;
-webkit-transform: scale(4);
-moz-transform: scale(4);
-ms-transform: scale(4);
transform: scale(4);
opacity: 0;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.btn-7f.btn-activated:after {
visibility: visible;
-webkit-animation: dropDown 0.3s forwards;
-moz-animation: dropDown 0.3s forwards;
animation: dropDown 0.3s forwards;
}
@-webkit-keyframes dropDown {
to {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes dropDown {
to {
opacity: 1;
-moz-transform: scale(1);
}
}
@keyframes dropDown {
to {
opacity: 1;
transform: scale(1);
}
}
/* Button 7g */
.btn-7g:after {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
font-size: 26px;
line-height: 54px;
color: #0a833d;
visibility: hidden;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
opacity: 0;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.btn-7g.btn-activated:after {
visibility: visible;
-webkit-animation: dropDownFade 0.5s forwards;
-moz-animation: dropDownFade 0.5s forwards;
animation: dropDownFade 0.5s forwards;
}
@-webkit-keyframes dropDownFade {
50% {
opacity: 1;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(1.5);
}
}
@-moz-keyframes dropDownFade {
50% {
opacity: 1;
-moz-transform: scale(1);
}
100% {
opacity: 0;
-moz-transform: scale(1.5);
}
}
@keyframes dropDownFade {
50% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
/* Button 7h */
.btn-7h span {
display: inline-block;
width: 100%;
}
.btn-7h:before {
position: absolute;
left: 0;
width: 40%;
font-size: 160%;
line-height: 0.8;
color: #0a833d;
}
/* Success and error */
.btn-success,
.btn-error {
color: transparent;
}
.btn-success:after,
.btn-error:after {
z-index: 1;
color: #fff;
left: 40%;
}
.btn-success:before {
content: "\e001";
}
.btn-success:after {
content: "Success!";
-webkit-animation: moveUp 0.5s;
-moz-animation: moveUp 0.5s;
animation: moveUp 0.5s;
}
@-webkit-keyframes moveUp {
0% {
-webkit-transform: translateY(50%);
opacity: 0;
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes moveUp {
0% {
-moz-transform: translateY(50%);
opacity: 0;
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@keyframes moveUp {
0% {
transform: translateY(50%);
opacity: 0;
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.btn-error {
-webkit-animation: shake 0.5s;
-moz-animation: shake 0.5s;
animation: shake 0.5s;
}
/* From Dan Eden's animate.css: http://daneden.me/animate/ */
@-webkit-keyframes shake {
0%, 100% {-webkit-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake {
0%, 100% {-moz-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}
.btn-error:before {
content: "\e002";
}
.btn-error:after {
content: "Error!";
-webkit-animation: scaleFromUp 0.5s;
-moz-animation: scaleFromUp 0.5s;
animation: scaleFromUp 0.5s;
}
@-webkit-keyframes scaleFromUp {
0% {
-webkit-transform: scale(0);
opacity: 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes scaleFromUp {
0% {
-moz-transform: scale(0);
opacity: 0;
}
100% {
opacity: 1;
-moz-transform: scale(1);
}
}
@keyframes scaleFromUp {
0% {
transform: scale(0);
opacity: 0;
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Special trash effect */
.trash-effect {
position: relative;
max-width: 320px;
margin: 60px auto 0;
}
.trash-effect .icon-file {
font-size: 30px;
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: 50%;
margin: -45px 0 0 -25px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-webkit-transform: translateX(90px) translateY(20px) scale(1);
-moz-transform: translateX(90px) translateY(20px) scale(1);
-ms-transform: translateX(90px) translateY(20px) scale(1);
transform: translateX(90px) translateY(20px) scale(1);
}
.trash-effect .icon-file:nth-child(2) {
-webkit-transform: translateX(140px) translateY(-10px) scale(1);
-moz-transform: translateX(140px) translateY(-10px) scale(1);
-ms-transform: translateX(140px) translateY(-10px) scale(1);
transform: translateX(140px) translateY(-10px) scale(1);
-webkit-transition-delay: 0.1s;
-moz-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.trash-effect .icon-file:nth-child(3) {
-webkit-transform: translateX(140px) translateY(50px) scale(1);
-moz-transform: translateX(140px) translateY(50px) scale(1);
-ms-transform: translateX(140px) translateY(50px) scale(1);
transform: translateX(140px) translateY(50px) scale(1);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.trash-effect.trash-effect-active .icon-file {
-webkit-transform: translateX(-100px) translateY(-10px) scale(0);
-moz-transform: translateX(-100px) translateY(-10px) scale(0);
-ms-transform: translateX(-100px) translateY(-10px) scale(0);
transform: translateX(-100px) translateY(-10px) scale(0);
}
/* Button 7i */
.btn-7i {
box-shadow: none;
border-radius: 0 0 7px 7px;
padding: 27px 33px;
-webkit-transform: translateX(-100px);
-moz-transform: translateX(-100px);
-ms-transform: translateX(-100px);
transform: translateX(-100px);
}
.btn-7i:before {
line-height: 45px;
}
.btn-7i:after {
height: 11px; /* should be 10px but in Chrome Version 34.0.1847.131 there's a gap because of the transform of the button */
width: 100%;
background: #17aa56;
border-radius: 7px 7px 0 0;
left: 0;
top: -10px;
z-index: 1;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.trash-effect-active .btn-7i:after {
-webkit-animation: openTrash 0.5s;
-moz-animation: openTrash 0.5s;
animation: openTrash 0.5s;
}
@-webkit-keyframes openTrash {
50% {
-webkit-transform: rotate(-35deg);
}
100% {
-webkit-transform: rotate(0deg);
}
}
@-moz-keyframes openTrash {
50% {
-moz-transform: rotate(-35deg);
}
100% {
-moz-transform: rotate(0deg);
}
}
@keyframes openTrash {
50% {
transform: rotate(-35deg);
}
100% {
transform: rotate(0deg);
}
}
/* Button 8 */
.perspective {
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
display: inline-block;
}
.btn-8 {
display: block;
background: #5cbcf6;
outline: 1px solid transparent; /* FF jagged edges fix */
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.btn-8:active {
background: #55b7f3;
}
/* Button 8a */
.btn-8a:after {
width: 100%;
height: 42%; /* should be 40% but there's a gap in Chrome Version 34.0.1847.131 */
left: 0;
top: -40%;
background: #49a7df;
-webkit-transform-origin: 0% 100%;
-webkit-transform: rotateX(90deg);
-moz-transform-origin: 0% 100%;
-moz-transform: rotateX(90deg);
transform-origin: 0% 100%;
transform: rotateX(90deg);
}
.btn-8a:hover {
-webkit-transform: rotateX(-15deg);
-moz-transform: rotateX(-15deg);
-ms-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
/* Button 8b */
.btn-8b:after {
width: 100%;
height: 40%;
left: 0;
top: 100%;
background: #49a7df;
-webkit-transform-origin: 0% 0%;
-webkit-transform: rotateX(-90deg);
-moz-transform-origin: 0% 0%;
-moz-transform: rotateX(-90deg);
-ms-transform-origin: 0% 0%;
-ms-transform: rotateX(-90deg);
transform-origin: 0% 0%;
transform: rotateX(-90deg);
}
.btn-8b:hover {
-webkit-transform: rotateX(15deg);
-moz-transform: rotateX(15deg);
-ms-transform: rotateX(15deg);
transform: rotateX(15deg);
}
/* Button 8c */
.btn-8c:after {
width: 21%; /* should be 20% but there's a gap in Chrome Version 34.0.1847.131 */
height: 100%;
left: -20%;
top: 0;
background: #49a7df;
-webkit-transform-origin: 100% 0%;
-webkit-transform: rotateY(-90deg);
-moz-transform-origin: 100% 0%;
-moz-transform: rotateY(-90deg);
-ms-transform-origin: 100% 0%;
-ms-transform: rotateY(-90deg);
transform-origin: 100% 0%;
transform: rotateY(-90deg);
}
.btn-8c:hover {
-webkit-transform: rotateY(15deg);
-moz-transform: rotateY(15deg);
-ms-transform: rotateY(15deg);
transform: rotateY(15deg);
}
/* Button 8d */
.btn-8d:after {
width: 20%;
height: 100%;
left: 100%;
top: 0;
background: #49a7df;
-webkit-transform-origin: 0% 0%;
-webkit-transform: rotateY(90deg);
-moz-transform-origin: 0% 0%;
-moz-transform: rotateY(90deg);
-ms-transform-origin: 0% 0%;
-ms-transform: rotateY(90deg);
transform-origin: 0% 0%;
transform: rotateY(90deg);
}
.btn-8d:hover {
-webkit-transform: rotateY(-15deg);
-moz-transform: rotateY(-15deg);
-ms-transform: rotateY(-15deg);
transform: rotateY(-15deg);
}
/* Button 8e */
.btn-8e {
-webkit-transform: rotateX(-15deg);
-moz-transform: rotateX(-15deg);
-ms-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
.btn-8e:after {
width: 100%;
height: 42%; /* should be 40% but there's a gap in Chrome Version 34.0.1847.131 */
left: 0;
top: -40%;
background: #49a7df;
-webkit-transform-origin: 0% 100%;
-webkit-transform: rotateX(90deg);
-moz-transform-origin: 0% 100%;
-moz-transform: rotateX(90deg);
-ms-transform-origin: 0% 100%;
-ms-transform: rotateX(90deg);
transform-origin: 0% 100%;
transform: rotateX(90deg);
}
.btn-8e:active {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
/* Button 8f */
.btn-8f {
-webkit-transform: rotateX(15deg);
-moz-transform: rotateX(15deg);
-ms-transform: rotateX(15deg);
transform: rotateX(15deg);
}
.btn-8f:after {
width: 100%;
height: 40%;
left: 0;
top: 100%;
background: #49a7df;
-webkit-transform-origin: 0% 0%;
-webkit-transform: rotateX(-90deg);
-moz-transform-origin: 0% 0%;
-moz-transform: rotateX(-90deg);
-ms-transform-origin: 0% 0%;
-ms-transform: rotateX(-90deg);
transform-origin: 0% 0%;
transform: rotateX(-90deg);
}
.btn-8f:active {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
transform: rotateX(0deg);
}
/* Button 8g */
.btn-8g {
background: #fff;
color: #999;
}
.btn-8g:active {
background: #fff;
}
.btn-8g:after,
.btn-8g:before {
text-transform: uppercase;
width: 100%;
height: 100%;
position: absolute;
left: 0;
line-height: 70px;
}
.btn-8g:after {
top: -98%; /* should be -100% but there's a gap in Chrome Version 34.0.1847.131 */
background: #7aca7c;
color: #358337;
content: 'It worked!';
-webkit-transform-origin: 0% 100%;
-webkit-transform: rotateX(90deg);
-moz-transform-origin: 0% 100%;
-moz-transform: rotateX(90deg);
-ms-transform-origin: 0% 100%;
-ms-transform: rotateX(90deg);
transform-origin: 0% 100%;
transform: rotateX(90deg);
}
.btn-8g:before {
top: 100%;
background: #e96a6a;
color: #a33a3a;
content: 'Error!';
font-weight: 700;
font-family: 'Lato', Calibri, Arial, sans-serif;
-webkit-transform-origin: 0% 0%;
-webkit-transform: rotateX(-90deg);
-moz-transform-origin: 0% 0%;
-moz-transform: rotateX(-90deg);
-ms-transform-origin: 0% 0%;
-ms-transform: rotateX(-90deg);
transform-origin: 0% 0%;
transform: rotateX(-90deg);
}
.btn-8g.btn-success3d {
background: #aaa;
-webkit-transform-origin: 50% 100%;
-webkit-transform: rotateX(-90deg) translateY(100%);
-moz-transform-origin: 50% 100%;
-moz-transform: rotateX(-90deg) translateY(100%);
-ms-transform-origin: 50% 100%;
-ms-transform: rotateX(-90deg) translateY(100%);
transform-origin: 50% 100%;
transform: rotateX(-90deg) translateY(100%);
}
.btn-8g.btn-error3d {
background: #aaa;
-webkit-transform-origin: 50% 0%;
-webkit-transform: rotateX(90deg) translateY(-100%);
-moz-transform-origin: 50% 0%;
-moz-transform: rotateX(90deg) translateY(-100%);
-ms-transform-origin: 50% 0%;
-ms-transform: rotateX(90deg) translateY(-100%);
transform-origin: 50% 0%;
transform: rotateX(90deg) translateY(-100%);
}
/* General Demo Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
font-weight: normal;
font-style: normal;
}
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.category-test {width: 100%; height: 70px; float: left; position: relative; padding:10px; background: #f8f8f8; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.category-test img {height: 50px; width: auto; float: left; margin: 0px;}
.category-test h2 {clear: none; font-size: 2.5em; margin: 0px; margin-left:70px; }
.category-test-button {margin-left: 800px; margin-top: -27px; float: left; position: relative;}
.category-test: hover {background: #428bca;}
.category-test-light {width: 100%; height: 70px; float: left; position: relative; padding:10px; background: #f8f8f8; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.category-test-light img {height: 50px; width: auto; float: left; margin: 0px;}
.category-test-light h2 {clear: none; font-size: 2.5em; margin: 0px; margin-left:70px; }
.category-test-button-light {margin-left: 800px; margin-top: -27px; float: left; position: relative;}
/*AGGIUNTE MENU QUIZ*/
.menu_bar {background-color: #fff; color: #428bca; float: left; width: 100%; margin-bottom: 30px; height: 100px; }
.bar_message {float: left; width: 100%; padding: 10px; background-color: #87cefa; font-size: 18px; color: #ffffff; font-weight: 300; margin-top: 30px;}
.first_item, .second_item, .third_item {float: left; width: 33.333333%; padding-bottom: 10px; text-align: center; margin-top: 20px; height: auto; }
.image_menu {width:50px; height:50px; background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2015/03/chart_small.png); background-repeat: no-repeat; margin: 0 auto; padding-top: 45px;}
.image_menu2 {width:150px; height:52px; background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2014/11/matita_small.png); background-repeat: no-repeat; margin: 0 auto; padding-top: 45px; background-position: center; }
.image_menu3 {width:150px; height:50px; background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2014/11/esame_small.png); background-repeat: no-repeat; margin: 0 auto; padding-top: 45px; background-position: center; }
.image_menu a {color: #fff !important;}
.paragraph_menu_quiz {color: #fff;}
.paragraph_menu_quiz:hover {color: #d80c1b;}
/*HOME PAGE BLOCKS*/
.firstblockup figure, .firstblockbottom figure, .secondblock figure{
margin: 0;
position: relative;
}
.firstblockup figure img, .firstblockbottom figure img, .secondblock figure img {
max-width: 100%;
display: block;
position: relative;
}
.firstblockup figcaption, .firstblockbottom figcaption, .secondblock figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
background: #444444;
color: #ffffff;
}
.firstblockup figcaption h3, .firstblockbottom figcaption h3, .secondblock figcaption h3{
margin: 0;
padding: 0;
color: #fff;
line-height: 30px;
}
.firstblockup figcaption a {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: #009CF0;
color: #fff;
}
.firstblockbottom figcaption a {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: #2F88F0;
color: #fff;
}
.secondblock figcaption a {
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: #4dd6d6;
color: #fff;
}
/* Caption Style 4 */
.firstblockup li, .firstblockbottom li, .secondblock li{
-webkit-perspective: 1700px;
-moz-perspective: 1700px;
perspective: 1700px;
-webkit-perspective-origin: 0 50%;
-moz-perspective-origin: 0 50%;
perspective-origin: 0 50%;
}
.firstblockup figure, .firstblockbottom figure, .secondblock figure{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.firstblockup figure > div, .firstblockbottom figure > div, .secondblock figure > div{
overflow: hidden;
}
.firstblockup figure img, .firstblockbottom figure img, .secondblock figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .firstblockup figure:hover img,
.firstblockup figure.cs-hover img {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
}
.no-touch .firstblockbottom figure:hover img,
.firstblockbottom figure.cs-hover img {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
}
.no-touch .secondblock figure:hover img,
.secondblock figure.cs-hover img {
-webkit-transform: translateX(25%);
-moz-transform: translateX(25%);
-ms-transform: translateX(25%);
transform: translateX(25%);
}
.firstblockup figcaption, .firstblockbottom figcaption{
height: 245px;
width: 80%;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.secondblock figcaption {
height: 500px;
width: 80%;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .firstblockup figure:hover figcaption,
.firstblockup figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.no-touch .firstblockbottom figure:hover figcaption,
.firstblockbottom figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.no-touch .secondblock figure:hover figcaption,
.secondblock figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.firstblockup figcaption a, .firstblockbottom figcaption a, .secondblock figcaption a{
position: absolute;
bottom: 20px;
right: 20px;
}
/*AGGIUNTE DA EOC - TEMPLATE */
.home_container {width: 970px; float: left; font-family: "Open Sans Condensed", Helvetica, Arial, sans-serif !important; font-weight: 200; margin-top: 60px;}
.home_image {width: 100%; max-width: 480px;}
.blocks_container {width: 480px; float: left; }
.slide_container {width: 480px; height:500px; float: left; background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2015/03/home_image.png); background-size: 480px 500px; margin-right: 10px;}
.firstblock {width: 235px; margin-right: 10px; height: 500px; float: left; background: transparent;}
.firstblock p {font-size: 1.5em !important; line-height: 1.3em !important; text-align: left !important;}
.firstblockup {width: 235px; margin-bottom: 10px; float: left; height: 245px;}
.firstblockbottom {width: 235px; height: 245px; float: left;}
.secondblock {width: 235px; height: 500px; float: left;}
.secondblock p {font-size: 1.5em !important; line-height: 1.3em !important; text-align: left !important;}
.secondblock span {font-size: 1.2em;}
.img_figure {height: 245px;}
.img_figure_big {height: 500px;}
.horizontal_home_container {width: 970px; float: left; margin-top: 10px; height:180px;}
.horconfirst {float: left; width: 600px; margin-right: 10px; background-color: deepskyblue; height:180px; background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2015/03/rinnova_ora.png); background-size: 600px 180px;}
.horconsecond {float: left; width: 360px; background-color: lightskyblue; height:180px; background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2012/07/chiamaci-ora.png); background-size: 360px 180px;}
.horconimage {width: 100%; max-width: 600px;}
.center_text {line-height: 180px; color: #ffffff; font-size: 30px; margin-left: 30px; font-weight: bold;}
.img_patenti {width: 100%; float: left; max-width: 350px; margin-right: 20px; margin-bottom: 10px;}
.content_title {clear: none; font-size: 2em !important; font-variant: small-caps; font-weight: bold !important;}
/* BOTTONI CON TRANSIZIONE*/
.info_button {background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2015/03/back_info_button.png); background-size: 200px 50px; margin-right: 10px; width: 200px; height: 50px; float: left; color: #ffffff; font-size: 15px; font-weight: bold !important; text-align: center; line-height: 50px; padding-left: 35px; transition: background-image 0.4s linear, color 0.6s ease-in; -moz-transition: background-image 0.4s linear, color 0.6s ease-in;-webkit-transition: background-image 0.4s linear, color 0.6s ease-in;-o-transition: background-image 0.4s linear, color 0.6s ease-in;}
.patentea_button {background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2015/03/back_patentea_button.png);background-size: 200px 50px; margin-right: 10px; width: 200px; height: 50px; float: left; color: #ffffff; font-size: 15px; font-weight: bold !important; text-align: center; line-height: 50px; padding-left: 35px; transition: background-image 0.4s linear, color 0.6s ease-in; -moz-transition: background-image 0.4s linear, color 0.6s ease-in;-webkit-transition: background-image 0.4s linear, color 0.6s ease-in;-o-transition: background-image 0.4s linear, color 0.6s ease-in;}
.rinnovo_button {background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2015/03/rinnovo_patente_button.png);background-size: 200px 50px; margin-right: 10px; width: 200px; height: 50px; float: left; color: #ffffff; font-size: 15px; font-weight: bold !important; text-align: center; line-height: 50px; padding-left: 35px; transition: background-image 0.4s linear, color 0.6s ease-in; -moz-transition: background-image 0.4s linear, color 0.6s ease-in;-webkit-transition: background-image 0.4s linear, color 0.6s ease-in;-o-transition: background-image 0.4s linear, color 0.6s ease-in;}
.quiz_exam {background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2015/03/exam_button.png); background-size: 200px 50px; margin-right: 10px; width: 200px; height: 50px; float: left; color: #ffffff; font-size: 15px; font-weight: bold !important; text-align: center; line-height: 50px; padding-left: 35px; transition: background-image 0.4s linear, color 0.6s ease-in; -moz-transition: background-image 0.4s linear, color 0.6s ease-in;-webkit-transition: background-image 0.4s linear, color 0.6s ease-in;-o-transition: background-image 0.4s linear, color 0.6s ease-in;}
.info_button a, .patentea_button a, .rinnovo_button a, .quiz_exam a, .quiz_button a {color: #ffffff; font-weight: bold;}
.quiz_button {background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2015/03/button_quiz.png); background-size: 200px 50px; margin-right: 10px; width: 200px; height: 50px; float: left; color: #ffffff; font-size: 15px; font-weight: bold !important; text-align: center; line-height: 50px; padding-left: 35px; transition: background-image 0.4s linear, color 0.6s ease-in; -moz-transition: background-image 0.4s linear, color 0.6s ease-in;-webkit-transition: background-image 0.4s linear, color 0.6s ease-in;-o-transition: background-image 0.4s linear, color 0.6s ease-in;}
.rinnovo_button:hover {background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2015/03/rinnovo_patente_button_hover.png); color: #333333;}
.patentea_button:hover {background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2015/03/back_patentea_button_hover.png); color: #333333;}
.info_button:hover {background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2015/03/back_info_button_hover.png); color: #333333;}
.quiz_button:hover {background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2015/03/button_quiz_hover.png); color: #333333;}
.info_button a:hover {color: #333333;}
.quiz_exam:hover {background-image: url(http://www.autoscuolalafavorita.it/wp-content/uploads/2015/03/exam_button_hover.png); color: #333333;}
.alert {display: none;}
.wpProQuiz_question_text p {font-size: 1.6em !important; color: #428bca !important; line-height: 1.2 !important;}
.footer-data {width:960px; margin:0 auto; text-align:center; color:#fff;}
.footer-data p {text-align:center !important; margin-bottom:-10px;}
.eoc-copyright {margin-bottom:10px !important; margin-top:20px;}
#footer-content {display:none !important}
.contact-form-container {width:50%; float:left;}
.content-headline {font-size:3em !important; text-transform:uppercase; font-weight:bold !important; color:#428bca; display:block; margin-bottom:40px;}
.info-autoscuola {width:45%; float:left; margin-right:10%; margin-top:20px}
.modulo-autoscuola {width:45%; float:left; margin-top:20px}
/*HOME PAGE CHOICE WITH MODAL*/
.horizontal-block {width:970px; float:left; padding:10px; border:7px solid #428bca; margin-top:25px;}
.categories-block {width:300px; margin-right:10px; float:left; text-align:center; margin-top:-25px;}
.categories-image {width:100%; max-width:250px;}
.categories-title {font-size:30px !important; font-weight:bold !important; text-align:center; color:#428bca; text-transform:uppercase;}
.closebt {transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s; -webkit-transition:all 0.2s; -ms-transition:all 0.2s; cursor:pointer}
.closebt:hover {transform:rotate(90deg);}
#btn-close-modal {width:100%; text-align: center; cursor:pointer; color:#fff; margin-top:40px;}
.modal-content {width:100%; max-width:960px; margin-top:100px; margin-left:auto; margin-right:auto;}
.modal-content h2 {clear:none !important; color:#fff; text-transform:uppercase; font-weight:bold;}
.modal-content p {color:#fff;}
.modal-img {width:100%; max-width:300px; float:left; margin-right:20px; margin-bottom:20px}
.modal-separator {width:100%; float:left; margin-bottom:20px; border-bottom:2px solid #fff; margin-top:20px;}
.modal-button {width:45%; float:left; text-align:center; height:40px; margin-top:20px; padding:10px 20px; margin-bottom:20px;}
.modal-button a {color:#fff; font-size:30px; font-weight:bold}
.modal-contact {width:100%; float:left}
.arancio {background-color:coral; transition:ease-out 1s;}
.arancio:hover {background-color:lightcoral; transition:ease-in 1s;}
.giallo {background-color:lightblue; transition:ease-out 1s;}
.giallo:hover {background-color:cornflowerblue; transition:ease-out 1s;}
/*QUIZ CHOICE PAGE*/
.quiz_choice_A {float:left;width:100%;max-width:480px;}
.quiz_choice_B {float: left;width: 100%; max-width: 480px;}
/*WP-PRO QUIZ*/
.wpProQuiz_reviewQuestion {border:none !important; background-color:skyblue !important}
.wpProQuiz_button2 {border:none !important; background-color:lightskyblue !important; border-radius:0px !important; box-shadow:none !important; text-shadow:none !important; float:left !important; width:50%; color:#fff !important; font-size:1.6em !important; border-right:1px solid #fff !important; font-weight:bold !important;}
.wpProQuiz_button {border:none !important; background-color:lightskyblue !important; border-radius:0px !important; box-shadow:none !important; text-shadow:none !important; float:left !important; width:45%; color:#fff !important; font-size:1.6em !important; border-right:1px solid #fff !important}
.wpProQuiz_button:hover {background-color:#4169e1 !important; border:none !important; border-radius:0px !important; box-shadow:none !important; text-shadow:none !important; float:left !important; margin-bottom:10px !important}
.wpProQuiz_button2:hover {background-color:#4169e1 !important}
.wpProQuiz_reviewLegend {font-size:1.3em}
.wpProQuiz_question_text img {float:left !important}
.wpProQuiz_questionList {border:none !important; background-color:#fff !important; float:left !important; width:auto !important; max-width:650px !important; display:block !important; min-height:160px !important; min-width:600px !important;}
.wpProQuiz_questionListItem {margin-bottom:6px !important; font-size:1.3em !important; display:block; width:100% !important; padding-top:5px !important;}
.wpProQuiz_questionListItem label {line-height:120%; font-size: 1.1em;}
.wpProQuiz_quiz input[type="checkbox"] {float:left !important; width:auto; max-width:4% !important; margin-right:10px !important;}
.wpProQuiz_quiz input[type="radio"] {float:left !important; width:4% !important; margin-right:10px !important}
/*RESPONSE WP-PRO QUIZ*/
.wpProQuiz_response {background:#fff !important; border:none !important; box-shadow:none !important;}
.wpProQuiz_response span {width:20% !important; color:#444 !important; font-size:1.3em !important;}
.wpProQuiz_addToplist {background-color:#fff !important; font-size:1.4em !important; border:none !important}
.box-comandi {width:100%; float:left; display:block; padding:10px;}
.addleader {width:30% !important; font-size:1.2em !important}
.show, .restart, .leader {float: left !important; margin-bottom:10px !important; display:block; width:45% !important;}
.wpProQuiz_addToplistMessage {background-color:#fff !important; border-radius:0px !important; border:1px solid #428bca !important; color:#444 !important; padding:15px !important}
/*COOKIE PAGE*/
.table-cookie {font-size: 1.2em}
.cookie-thead {background-color: #428bca; color: #fff;}
.cookie-td {border-bottom: 1px solid #428bca; padding: 5px 15px}
/* COLORED IMAGES*/
.grayscale {
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
-webkit-backface-visibility: hidden; /* Fix for transition flickering */
width: 100%;
max-width: 480px;
}
.grayscale:hover {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(0%);
}
/*COOKIE BANNER CODE*/
.eucookielaw-banner .well p.banner-message {
font-size: 1em !important;
}
.eucookielaw-banner .well p.banner-agreement-buttons {
font-size: 1em !important;
margin-top: 0px !important;
}
.eucookielaw-banner .well p.banner-agreement-buttons a.disagree-button, .eucookielaw-banner .well p.banner-agreement-buttons a.agree-button {
padding:12px 15px !important;
}