ACC SHELL
/*
Theme Name: Dovastex
Theme URI:
Author: Ondrej Krobot
*/
/* =========================================
MIXINS
============================================ */
.border {
border: solid 1px #000;
}
.radius(@r){
border-radius: @r;
}
/* =========================================
CLEARFIX
============================================ */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
/* =========================================
COLORS
============================================ */
@purple: #60338B;
@yellow: #FFCB05;
@green: #C22760;
@red: #C22760;
@grey: #999;
/* =========================================
LAYOUT
============================================ */
h1, h2, h3, h4, h5,h6 {
color: #333333;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
color: @purple;
margin: 0;
padding: 0;
}
h1 {
font-weight: bolder;
font-size: 30px;
margin-bottom: 15px;
}
h2 {
font-size: 25px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
a {
color: #333;
text-decoration: underline;
}
a:hover {
color: #333;
}
p {
font-size: 14px;
font-weight: 300;
color: #333;
font-family: "Arial";
}
ul, ol {
font-size: 14px;
font-weight: 300;
color: #333;
font-family: "Arial";
}
table {
border-collapse: collapse;
font-size: 14px;
color: #333;
th, td {
padding: 6px 0;
font-weight: 300;
}
th {
padding-right: 20px;
font-weight: normal;
}
thead {
border-bottom: solid 1px #CCC;
td {
font-weight: bolder;
}
}
}
/* =========================================
BODY
============================================ */
body {
position: relative;
font-family: 'Open Sans', sans-serif;
background: #FCFCFC url(../img/bg-slider-3.png) no-repeat center top;
}
.container {
max-width: 1070px;
}
.wrapper {
width: 1070px;
margin: 20px auto 20px auto;
box-shadow: 0 0 2px #333;
}
.row {
margin-left: 0;
margin-right: 0;
}
/* =========================================
HEADER
============================================ */
header{
position: relative;
min-height: 90px;
padding: 0 0 0 20px;
border-bottom: solid 5px @grey;
background: #FFF;
.logo {
float: left;
width: 200px;
height: 60px;
margin: 10px 0 0 0;
padding-top: 20px;
a {
display: block;
width: 100%;
height: 100%;
}
}
ul{
float: right;
padding: 0;
margin: 19px 0 0 0;
list-style: none;
li {
float: left;
a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
font-weight: 600;
}
a:hover,
a:focus {
color: #333;
text-decoration: none;
}
}
li.current_page_item a{
color: @red;
}
li > a:after {
color: @red;
content: " \f107";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
li > a:only-child:after {
content: '';
}
li ul {
position: relative;
display: none;
width: 250px;
position: absolute;
padding: 0;
margin: 0;
z-index: 1000;
background: #FFF;
box-shadow: 0 2px 2px #333;
li {
display: block;
width: 100%;
min-height: 10px;
border: 0;
border-bottom: solid 1px @grey;
a {
display: block;
font-size: 13px;
border-right: 0;
padding: 10px 20px 5px 20px;
margin-bottom: 5px;
color: #333;
}
}
li:hover {
background: #F8F8F8;
}
li:last-child a{
border-bottom: 0;
}
}
li:hover > ul {
display: block;
}
}
}
/* =========================================
HEADER
============================================ */
.slider{
position: relative;
height: 400px;
background: #DDD;
.my-slider {
height: 400px;
overflow: hidden;
border-bottom: solid 5px @grey;
}
.slide-1 {
width: 100%;
min-height: 1px;
background: #999;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.slide-2 {
width: 100%;
min-height: 1px;
background: #999;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.slide-3 {
width: 100%;
min-height: 1px;
background: #999;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.slider-arrow-right {
position: absolute;
top: 175px;
right: -25px;
width: 50px;
height: 50px;
line-height: 45px;
background-color: rgba(96,51,139,1);
cursor: pointer;
z-index: 100;
text-align: center;
color: #FFF;
font-size: 40px;
font-weight: bolder;
transition: all 0.3s ease;
border-radius: 50%;
}
.slider-arrow-left {
position: absolute;
top: 175px;
left: -25px;
width: 50px;
height: 50px;
line-height: 45px;
background-color: rgba(96,51,139,1);
cursor: pointer;
z-index: 100;
text-align: center;
color: #FFF;
font-size: 40px;
font-weight: bolder;
transition: all 0.3s ease;
border-radius: 50%;
}
.slider-arrow-right:hover,
.slider-arrow-left:hover {
background-color: #E2B100;
}
}
/* =========================================
MAIN CONTENT
============================================ */
.main-content {
position: relative;
width: 100%;
min-height: 400px;
padding: 30px 20px;
background: #FFF;
.main-content__title {
float: left;
width: 100%;
min-height: 10px;
border-bottom: dotted 1px #660417;
h1 {
float: left;
}
.breadcrumbs {
float: right;
font-size: 12px;
margin-top: 10px;
color: @green;
list-style: none;
li {
display: inline-block;
color: #666;
a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
}
.separator {
margin: 0 5px;
color: @green;
}
}
}
.main-content__content {
float: left;
position: relative;
width: 100%;
min-height: 10px;
margin-top: 20px;
}
.main-content__left-col {
float: left;
width: 700px;
}
.main-content__right-col {
float: right;
width: 300px;
}
.main-content__half-col {
width: 450px;
}
.page-contact-form {
float: left;
width: 100%;
min-height: 10px;
margin-top: 20px;
padding-top: 20px;
margin-bottom: 50px;
border-top: solid 1px #666;
.page-contact-form__left {
float: left;
width: 340px;
min-height: 10px;
}
.page-contact-form__right {
float: right;
width: 340px;
min-height: 10px;
}
.page-contact-form__box {
float: left;
width: 100%;
min-height: 10px;
position: relative;
p {
margin: 0;
}
}
input[type="submit"] {
margin-top: 0;
}
}
}
.sidebar-box {
float: left;
width: 100%;
min-height: 10px;
box-shadow: 0px 0px 2px #333;
.sidebar-box__title {
float: left;
width: 100%;
min-height: 10px;
text-align: left;
color: #FFF;
font-size: 14px;
padding: 10px;
font-weight: bolder;
background: @purple url(../img/bg-footer.png) repeat-x left 1px;
margin-bottom: 3px;
}
.sidebar-box__content {
float: left;
width: 100%;
min-height: 10px;
background: #F8F8F8;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
float: left;
width: 100%;
margin-bottom: 5px;
padding-bottom: 5px;
border-left: solid 0px @grey;
padding: 5px 10px;
.place {
float: left;
width: 100%;
min-height: 10px;
font-weight: bold;
font-size: 13px;
a {
color: #333;
}
}
.date {
float: left;
width: 100%;
min-height: 10px;
font-size: 11px;
color: #666;
}
a {
color: @green;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
}
}
}
}
/* =========================================
HOMEPAGE BOXES
============================================ */
.homepage-boxes {
position: relative;
width: 100%;
min-height: 10px;
padding: 20px 0 30px 0;
.homepage-box {
float: left;
width: 247px;
min-height: 10px;
margin: 10px 14px 0 0;
box-shadow: 0 0 2px #333;
.homepage-box__image {
float: left;
width: 100%;
height: 150px;
background: #F8F8F8;
margin-right: 10px;
border-top: solid 5px #FFF;
border-left: solid 5px #FFF;
border-right: solid 5px #FFF;
img {
display: block;
width: 100%;
}
}
.homepage-box__content {
float: left;
width: 100%;
min-height: 10px;
background: #F8F8F8;
padding: 10px;
border-top: solid 5px #FFF;
.homepage-box__title {
float: left;
width: 100%;
min-height: 10px;
h4{
font-size: 15px;
font-weight: bold;
padding: 0;
margin: 0;
a {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
}
}
}
.homepage-box__link {
float: left;
width: 100%;
min-height: 10px;
font-size: 11px;
margin-top: 5px;
a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
}
}
}
.last-homepage-box {
margin: 10px 0 0 0;
}
}
/* =========================================
NEWS
============================================ */
.new-box {
float: left;
width: 100%;
min-height: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px #E8E8E8;
.new-box__title {
float: left;
width: 100%;
min-height: 10px;
}
.new-box__date {
float: left;
width: 100%;
min-height: 10px;
color: #ccc;
margin-bottom: 10px;
font-size: 12px;
}
.new-box__content {
float: left;
width: 100%;
min-height: 10px;
}
}
/* =========================================
REFERENCES
============================================ */
.reference {
ul {
padding: 0 0 0 15px;
list-style: none;
li {
margin-bottom: 5px;
a {
text-decoration: none;
color: #333;
}
a:hover {
color: #60338B;
text-decoration: underline;
}
}
li > a:before {
color: #60338B;
content: "\f105 \00a0 ";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
li > a:only-child:after {
content: '';
}
}
}
.reference-box {
float: left;
width: 100%;
min-height: 10px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: solid 1px #E8E8E8;
.reference-box__title {
float: left;
width: 100%;
min-height: 10px;
margin-bottom: 10px;
}
.reference-box__content {
float: left;
width: 100%;
min-height: 10px;
}
}
/* =========================================
OFFERS
============================================ */
.offer-box {
float: left;
width: 100%;
min-height: 10px;
margin-bottom: 20px;
.offer-box__image {
float: left;
width: 200px;
height: 120px;
overflow: hidden;
border: solid 3px @grey;
margin-right: 10px;
img {
display: block;
width: 100%;
}
}
.offer-box__content {
float: left;
width: 400px;
height: 100px;
.offer-box__content__title {
float: left;
width: 100%;
font-size: 18px;
a {
color: @green;
font-weight: bolder;
text-decoration: none;
}
}
.offer-box__content__text {
p {
font-size: 12px;
}
}
.offer-box__content__link {
a {
font-size: 12px;
color: #333;
text-decoration: underline;
}
}
}
}
/* =========================================
CONTACT MAP
============================================ */
#map-box {
float: left;
width: 100%;
height: 400px;
border-radius: 10px;
margin-top: 40px;
}
/* =========================================
FOOTER
============================================ */
footer{
position: relative;
min-height: 10px;
background: @purple url(../img/bg-footer.png) repeat-x left 2px;
color: #FFF;
padding: 20px 0;
font-size: 12px;
a {
color: #FFF;
}
a:hover {
color: #FFF;
text-decoration: underline;
}
p {
color: #FFF;
font-size: 12px;
}
ul{
padding: 0;
margin: 0;
list-style: none;
color: #FFF;
li {
font-size: 12px;
a {
text-decoration: none;
color: #FFF;
font-size: 12px;
}
}
li > a:before {
color: #FFF;
content: "\f105 \00a0 ";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
li > a:only-child:after {
content: '';
}
}
.footer-box {
float: left;
width: 227px;
min-height: 100px;
margin: 0 20px 0 20px;
.footer-box__title {
float: left;
width: 100%;
min-height: 1px;
text-align: left;
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: solid 1px #133F3D;
h6 {
padding: 0;
margin: 0;
font-size: 15px;
color: #FFF;
text-transform: uppercase;
}
}
.footer-box__content {
float: left;
width: 100%;
min-height: 1px;
text-align: left;
a:hover {
color:#FFF;
}
}
}
.copyright {
float: left;
display: block;
width: 100%;
text-align: center;
font-size: 12px;
margin-top: 30px;
padding-top: 20px;
border-top: solid 1px #133F3D;
}
}
/* =========================================
CONTACT FORM
============================================ */
.input-box {
position: relative;
.input-box__info {
position: absolute;
left: 0;
top: 25px;
font-size: 13px;
span {
color: #cc0000;
}
}
}
input[type="submit"]{
float: right;
margin-top: 15px;
background: @grey;
border: 0;
color: #FFF;
text-transform: uppercase;
padding: 10px 20px;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 13px;
font-weight: bolder;
}
input[type="submit"]:hover {
background: #E2B100;
}
.required-star {
position: absolute;
right: 10px;
top: 5px;
font-size: 16px;
color: #cc0000;
}
input[type="text"],
input[type="email"] {
position: relative;
width: 100%;
height: 34px;
border: solid 1px #ccc;
text-indent: 10px;
margin: 0 0 15px 0;
background: #F8F8F8;
border-radius: 5px;
transition: all 0.3s ease;
font-size: 12px;
}
input[type="text"]:focus,
input[type="email"]:focus {
background: #F8F8F8;
}
textarea {
width: 100%;
height: 180px;
border: solid 1px #ccc;
resize: none;
text-indent: 10px;
padding: 10px 0;
margin: 0;
background: #F8F8F8;
border-radius: 5px;
transition: all 0.3s ease;
font-size: 12px;
}
textarea:focus {
background: #F8F8F8;
}
/* =========================================
GALLERY
============================================ */
#gallery-1 img {
float: left;
width: 105px;
height: 105px;
margin: 0px 12px 0px 0px;
border: 5px solid #FFF !important;
box-shadow: 0px 0px 1px #CCC;
background: no-repeat center center #cccccc;
overflow: hidden;
}
/* =========================================
WORDPRESS
============================================ */
img.alignright {
float: right;
margin: 0 0 15px 15px;
}
img.alignleft {
float: left;
margin: 0 15px 15px 0;
}
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
/* =========================================
CONTACT FORM 7
============================================ */
.wpcf7-not-valid-tip {
display: none !important;
}
.wpcf7-form-control-wrap {
display: block !important;
}
.wpcf7-validation-errors {
width: 100%;
background: #cc0000;
color: #FFF;
border: 0 !important;
margin: 0 0 20px 0 !important;
padding: 10px !important;
text-align: center !important;
}
.wpcf7-mail-sent-ok {
width: 100%;
background: #398F14;
color: #FFF;
border: 0 !important;
margin: 0 0 20px 0 !important;
padding: 10px !important;
text-align: center !important;
}
.wpcf7-not-valid {
border: solid 1px #cc0000 !important;
}
.wpcf7-captchac {
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
}
.wpcf7-captchar {
text-indent: 90px !important;
}
ACC SHELL 2018