@charset "utf-8";
/* CSS Document */
/* Fonts */
/* Droid Serif' */
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic);
/* Raleway
Using: font-family: 'Raleway', sans-serif;*/
@import url(https://fonts.googleapis.com/css?family=Raleway:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic&subset=latin,latin-ext);
/* Open Sans
Using: font-family: 'Open Sans', sans-serif;*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=latin-ext');
/* Encode Sans
Using: font-family: 'Montserrat', sans-serif; */
@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Expanded:100,200,300,400,500,600,700,800,900&subset=latin-ext');
/* Comfortaa
font-family: 'Comfortaa', cursive;
https://fonts.google.com/specimen/Comfortaa */
@import url('https://fonts.googleapis.com/css?family=Comfortaa:300,400,700&subset=latin-ext');
/* font-family: 'Montserrat', sans-serif;
https://fonts.google.com/specimen/Montserrat */
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext');
/* font-family: 'EB Garamond', serif;
https://fonts.google.com/specimen/EB+Garamond */
@import url('https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,500,500i,600,600i,700,700i,800,800i&subset=latin-ext');
/*==============================
1. THEME BASISC and GENERAL STRUCTURES
============================== */
/********** 1.1 Basics */
*{
margin: 0;
padding: 0;
}
p {
margin: 10px 0;
}
a {
text-decoration: none;
}
a:hover, a:focus {
text-decoration: none;
}
a, a:before, li, li:before, li:after, .btn, btn, .btn:before, .btn:after {
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
img {
max-width: 100%;
height: auto;
}
ul li, ol li {
list-style-type: none;
}
.display-none{
display: none;
}
.prev-next .btn:first-child svg {
margin-left: 15px;
margin-right: 0;
}
.prev-next .btn:last-child svg {
margin-right: 15px;
margin-left: 0;
}
@media (max-width: 767px) {
.prev-next .btn {
width: 100%;
margin-bottom: 10px;
}
.prev-next .btn:last-child {
margin-bottom: 0;
}
}
/* General margin and padding sections */
/* marginler top ve bottom için değer taşırken, paddingler 4 kenar için de taşımaktadır. çeviri */
.margin-5 {
margin: 5px 0;
}
.margin-10 {
margin: 10px 0;
}
.margin-15 {
margin: 15px 0;
}
.margin-30 {
margin: 30px 0;
}
.margin-60 {
margin: 60px 0;
}
.margin-0-15 {
margin-bottom: 15px;
}
.margin-0-30 {
margin-bottom: 30px;
}
.margin-0-60 {
margin-bottom: 60px;
}
.margin-60-30 {
margin: 60px 0 30px 0;
}
.margin-15-0 {
margin-top: 15px;
}
.margin-30-0 {
margin-top: 30px;
}
.margin-30-10 {
margin: 30px 0 10px 0;
}
.margin-30-60 {
margin: 30px 0 60px 0;
}
.margin-60-0 {
margin-top: 60px;
}
.margin-90-0 {
margin-top: 90px;
}
.margin-120-0 {
margin-top: 120px;
}
.margin-0-120 {
margin-bottom: 120px;
}
.margin-120-60 {
margin-top: 120px;
margin-bottom: 60px;
}
/**/
.padding-30 {
padding: 30px;
}
.padding-60 {
padding: 60px;
}
.padding-0-30 {
padding-bottom: 30px;
}
.padding-0-60 {
padding-bottom: 60px;
}
.padding-60-30 {
padding: 60px 30px;
}
.padding-30-0 {
padding-top: 30px;
}
.padding-30-10 {
padding: 30px 10px;
}
.padding-30-60 {
padding: 30px 60px;
}
.padding-60-0 {
padding-top: 60px;
}
.padding-90-0 {
padding-top: 90px;
}
.padding-120-0 {
padding-top: 120px;
}
.padding-0-120 {
padding-bottom: 120px;
}
.padding-120-60 {
padding: 120px 60px;
}
/**/
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
line-height: 22px;
letter-spacing: .5px;
-webkit-font-smoothing: antialiased !important;
overflow-x: hidden;
}
main {
margin: 0;
}
/* The page widens (with margin value) to be competible with 1170px page width. */
@media (min-width: 1200px) {
.container {
width: 1200px;
}
}
/********** 1.2 Typography */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
padding: 0;
font-weight: 600;
}
h1 {
font-size: 46px;
line-height: 54px;
}
h2 {
font-size: 40px;
line-height: 48px;
}
h3 {
font-size: 34px;
line-height: 42px;
}
h4 {
font-size: 28px;
line-height: 36px;
}
h5 {
font-size: 22px;
line-height: 30px;
}
h6 {
font-size: 16px;
line-height: 24px;
}
@media (max-width: 991px) {
h1 {
font-size: 34px;
line-height: 40px;
}
h2 {
font-size: 30px;
line-height: 36px;
}
h3 {
font-size: 26px;
line-height: 32px;
}
h4 {
font-size: 22px;
line-height: 28px;
}
h5 {
font-size: 18px;
line-height: 24px;
}
h6 {
font-size: 14px;
line-height: 20px;
}
}
/***** common head styles */
.head-style-1, .head-style-2, .head-style-3, .head-style-1-light, .head-style-2-light, .head-style-3-light {
position: relative;
padding: 26px 0 9px 0;
}
.head-style-1:before, .head-style-2:before, .head-style-3:before, .head-style-1-light:before, .head-style-2-light:before, .head-style-3-light:before {
content: '';
width: 170px;
height: 4px;
position: absolute;
}
.head-style-1:after, .head-style-2:after, .head-style-3:after, .head-style-1-light:after, .head-style-2-light:after, .head-style-3-light:after {
content: '';
width: 170px;
height: 1px;
position: absolute;
}
.head-style-1 .subhead, .head-style-2 .subhead, .head-style-3 .subhead, .head-style-1-light .subhead, .head-style-2-light .subhead, .head-style-3-light .subhead {
font-size: 13px;
font-style: italic;
font-weight: 400;
letter-spacing: 1px;
position: absolute;
top: 24px;
width: 100%;
}
@media (max-width: 991px) {
.head-style-1 .subhead, .head-style-2 .subhead, .head-style-3 .subhead, .head-style-1-light .subhead, .head-style-2-light .subhead, .head-style-3-light .subhead {
font-size: 11px;
}
}
/* head style 1 */
.head-style-1, .head-style-1-light {
text-align: center;
}
.head-style-1:before, .head-style-1-light:before {
left: 50%;
top: 0;
margin-left: -85px;
}
.head-style-1:after, .head-style-1-light:after {
left: 50%;
bottom: 0;
margin-left: -85px;
}
.head-style-1 .subhead, .head-style-1-light .subhead {
margin-top: -10px;
text-align: center;
}
/* head style 2 */
.head-style-2, .head-style-2-light {
text-align: right;
}
.head-style-2:before, .head-style-2-light:before {
right: 0;
top: 0;
}
.head-style-2:after, .head-style-2-light:after {
right: 0;
bottom: 0;
}
.head-style-2 .subhead, .head-style-2-light .subhead {
text-align: right;
}
/* head style 3 */
.head-style-3:before, .head-style-3-light:before {
left: 0;
top: 0;
}
.head-style-3:after, .head-style-3-light:after {
left: 0;
bottom: 0;
}
.head-style-3 .subhead, .head-style-3-light .subhead {
text-align: left;
}
/* head style 4 and 5 */
/* head style 4 and 5 are different from other head styles, these used with p tag */
/* common styles */
.head-style-4 .subhead, .head-style-5 .subhead {
font-size: 13px;
font-style: italic;
}
.head-style-4 h3, .head-style-5 h3 {
margin: 1px 0 0 0;
padding: 0;
line-height: 38px;
}
.head-style-4 p, .head-style-5 p {
margin-top: 24px;
text-align: left;
line-height: 25px;
}
/* head style 4 */
.head-style-4 {
text-align: right;
}
.head-style-4 p {
text-align: left;
}
/* head style 5 */
.head-style-5 p {
text-align: right;
}
/********** header - footers - menu - megamenu */
/********** 1.3 Header */
/*
Basic header styles that indicates general preferences of header.
There are not many header styles here because items of css are not designed according to header but referrred to that item directly.
For example navbar-default design has not been designed in accord with header, it has its own style.
*/
header {
position: relative;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 99;
margin-top: -20px;
}
/*
Common features of top styles that are used in all alrenatives.
*/
@media (max-width: 991px) {
header>.top {
padding-right: 15px;
}
header>.top>.container {
width: 100%;
}
}
header .top, header .top a {
font-size: 12px;
}
header .top ul{
margin-top: 10px;
}
header .top ul li {
display: inline;
margin-right: 30px;
}
header .top ul li:last-child {
margin-right: 0;
}
header .top ul li svg {
margin-right: 5px;
}
header .top ul li svg:hover {
background-color: transparent !important;
}
/*
The area of middle, logo and the menu.
it is named middle because there is a top bar on top and slide or page header on bottom.
*/
header .middle {
height: 111px;
border-bottom-width: 1px;
border-top-width: 4px;
border-top-style: solid;
border-bottom-style: solid;
}
/*
We set container width 100% if resolution is under 991px because it sets itself to mobile menu design under
991px thus there are no spaces left on the sides.
*/
@media (max-width: 991px) {
header>.middle>.container {
width: 100%;
}
}
/*
There are header elements that changes according to header styles
which uses header tag. For example: