$abroad-color:#9e2773;
 $ankara-color:#168cac;
 $consultant-color:#8da93d;
 $visa-color:#d86328;
 $main-font:Roboto;
 $second-font:Roboto;

$blue-color: #262262;
$red-color: #ed212a;

@mixin responsive($media) {
    @if $media == phone {
        @media (max-width: 480px) { @content; }
    }
    @else if $media == xs {
        @media (max-width: 767px) {@content; }
    }
    @else if $media == sm {
        @media (min-width: 768px) and (max-width: 979px) { @content; }
    }
    @else if $media == md {
        @media (min-width: 1200px) { @content; }
    }
    @else if $media == non-retina {
        @media screen and (-webkit-max-device-pixel-ratio: 1) { @content; }
    }
    @else if $media == retina {
        @media screen and (-webkit-min-device-pixel-ratio: 2) { @content; }
    }
    @else {
        @media only screen and (max-width: #{$media}px) { @content; }
    }
}

body{
  background-image: url('../img/body-bg.jpg');
  background-repeat: repeat-x;
  background-color: #f6f6f6;
}

// Colors
.red-text-color {
    color: $red-color;
}
.red-bg-color {
    background: $red-color;
    color: #fff;
}

.blue-text-color {
    color: $blue-color;
}
.blue-bg-color {
    background: $blue-color;
    color: #fff;
}

.abroad-text-color {
    color: $abroad-color;
}
.abroad-bg-color {
    background: $abroad-color;
    color: #fff;
}
.ankara-text-color {
    color: $ankara-color;
}
.ankara-bg-color {
    background: $ankara-color;
    color: #fff;
}
.consultant-text-color {
    color: $consultant-color;
}
.consultant-bg-color {
    background: $consultant-color;
    color: #fff;
}
.visa-text-color {
    color: $visa-color;
}
.visa-bg-color {
    background: $visa-color;
    color: #fff;
}
body {
    font-family: $second-font;
    font-size: 14px;
}
.logo {
    display: inline-block;
    margin-bottom: 20px;
    img {
        display: inline-block;
        width: 100%;
        max-width: 300px;
    }
}
.main-menu {
    .nav {
        text-align: center;
        li {
            transition: box-shadow .3s ease 0s;
             box-shadow: 0 -50px 0 rgba(0,0,0,0) inset;
            display: inline-block;
            float: none;
            a{
                font-size: 16px;
            }
             &.custom-bg {
                a {
                    color: #fff;
                    background: none !important;
                }
            }
            &:hover, &:active{
                box-shadow: 0 -50px 0 rgba(0,0,0,0.3) inset;
                a{
                    background: none;
                }
            }
        }
        @include responsive(991){
            display: none;
  
                li{
                    width: 100%;
                    float: left;
                    margin-bottom: 5px;
                    a{
                        width: 100%;
                        float: left;
                        padding: 13px;
                        font-size: 16px;
                    }
                }
          
            &.active{
                display: block;
            }
        }
        &.active{
            display: block;
        }
    }
}

.promo-box{
    float: left;
    padding: 15px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    text-decoration: none !important; 
    margin-top: 30px;
    min-height: 280px;
    transition:  all .3s ease 0s;
      transform:translateY(0);
    &:hover,&:active,&:focus{
        color:#fff;
        transform:translateY(-10px);
        box-shadow: 0 8px 20px rgba(0,0,0,.3);
    }
    i{
        margin-bottom: 0;
        font-size: 70px;
    }
    h2{
        margin: 0 0 15px 0;
        font-size: 28px;
    }
    p{ 
        line-height: 21px;
        color: rgba(#fff,.6);
    }
    @include responsive(767){
        min-height:inherit    }
}

.page-title{
    padding: 150px 30px 20px;
    float: left;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    box-sizing: border-box;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    &:after{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
          background: #363636;
        content: "";
        opacity: .7;
    }
    p{
        color: #fff;
        position: relative;
        z-index: 99;
        margin: 0 0 5px 0 !important;
    }
    h1{
        color: #fff;
        position: relative;
        z-index: 99;
         margin: 0;
        text-shadow: 0 2px 5px rgba(0,0,0,.1);
    }
}

.red-body{
    .page-title:after{
      background: #880b10;
    }
    .form-area{
        background: $red-color;

    }
}

.blue-body{
    .page-title:after{
      background: $blue-color;
    }
    .form-area{
        background: $blue-color;

    }
}

.abroad-body{
    .page-title:after{
      background: $abroad-color;
    }
    .form-area{
        background: $abroad-color;

    }
}

.ankara-body{
    .page-title:after{
      background: $ankara-color;
    }
    .form-area{
        background: $ankara-color;

    }
}

.consultant-body{
    .page-title:after{
      background: $consultant-color;
    }
    .form-area{
        background: $consultant-color;
    }
}

.visa-body{
    .page-title:after{
      background: $visa-color;
    }
    .form-area{
        background: $visa-color;
    }
}

.sidebar{
    width:100%;
    float: left;
    .info{
        margin-bottom:20px;
        float: left; 
        width: 100%;
        h2{
        margin: 0 0 10px 0
        }
        p{
            font-size: 15px;
            line-height: 24px;
        }
    }
    ul{
        float: left;
        width: 100%;
        list-style: none;
        padding: 0;
        li{
            margin-bottom: 10px;
            a{
                padding: 8px;
                box-sizing: border-box;
                display: block;
                font-size: 17px;
                text-decoration: none !important;
                color: #fff !important;
                i{
                    font-size: 24px;
                    vertical-align: middle;
                    margin-right: 15px;
                }
            }
        }
    }
}


.form-area{
    width:100%;
    float: left;
    padding: 20px;
    background: #363636;
    color: #fff;
    box-sizing: border-box;
            ::-webkit-input-placeholder {
                   color: rgba(#fff,.6);
                }

                :-moz-placeholder { /* Firefox 18- */
                   color: rgba(#fff,.6);  
                }

                ::-moz-placeholder {  /* Firefox 19+ */
                   color: rgba(#fff,.6);  
                }

                :-ms-input-placeholder {  
                   color: rgba(#fff,.6);  
                }
    h2{
        margin: 0 0 20px 0;
        font-size:20px;
    }
    .form-control{
        margin-bottom:20px;
    }
    .btn{
        width: 100%;
        font-weight: bold;
        padding:10px;
        font-size: 16px;
    }
}
.form-control{
    float: left;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 2px solid rgba(#fff,.3);
    color: #fff;
    background: none;
    outline:none;
    resize: none;
    &:focus{
        border-color:#fff;
    }
}
.btn{
    border: none,
}

.menu-link{
    float: left;
    width: 100%;
    text-align: center;
    font-size: 20px;
    background: #363636;
    font-family: $main-font;
    cursor: pointer;
    padding: 10px;
    box-sizing: border-box;
    color: #fff;
    margin-bottom: 20px;
    &:before{
        font-family: Ionicons;
        display: inline-block;
        vertical-align: middle;
         margin-right: 10px;
        font-size: 35px;
        position: relative;
        top: -2px;
    }
}

.flex-list{
    padding-left:15px;
    flex-wrap: wrap;
    display: flex;
    li{
        margin-bottom: 10px;
        flex: 1 1 280px;
    }
}

.address{
    float: left;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    background: #f4f4f4;
    p{
        font-size: 10px;
        letter-spacing: 2px;
        margin: 0;
        font-weight: bold;
        color: rgba(0,0,0,.4);
        text-transform: uppercase;
    }
    &-row{
        margin-bottom: 20px;
        float: left;
        width: 100%;
        &:last-child{
            margin-bottom: 0;
        }
        @include responsive(460){
            width: 100% !important;
        }
    }
    a{
        margin: 0;
        font-weight: bold;
        font-size: 15px
    }
    h4{
        line-height:23px;
        font-weight: bold;
        margin: 0;
    }
}

.content p{
    font-size: 16px;
    text-align: justify;
    margin-bottom: 20px;
}

.promo-section{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    h2{
        font-weight: bold;
        position: relative;
        float: left;
        width: 100%;
        padding-bottom: 15px;
        margin-bottom: 20px;
        &:before{
            position: absolute;
            left: 50%;
            width: 120px;
            bottom: 0;
            margin-left: -60px;
            height: 2px;
            background: #ddd;
            content: "";
            
        }
    }
    p{
        line-height: 28px;
        font-size: 17px;
    }
}

// classes.scss

/* 
    Yardimci Siniflar
*/

.full-width{
    width: 100%;
    float: left;
}

.hidden-element{
    @include opacity(0);
    visibility: hidden;
}

.visible-element{
    @include opacity(1);
    visibility: visible;
}

.border-box{
   -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.inline-block{
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.transition-bg{
    @include transition(background 0.3s ease);
}
.transition-color{
    @include transition(color 0.3s ease);
}


/* 
    Padding
*/

.no-padding{padding: 0 !important;}
.padding-5{padding: 5px !important;}
.padding-10{padding: 10px !important;}
.padding-15{padding: 15px !important;}
.padding-20{padding: 20px !important;}
.padding-25{padding: 25px !important;}
.padding-30{padding: 30px !important;}

.p-r-0{padding-right: 0 !important;}
.p-r-5{padding-right: 5px !important;}
.p-r-10{padding-right: 10px !important;}
.p-r-15{padding-right: 15px !important;}
.p-r-20{padding-right: 20px !important;}
.p-r-25{padding-right: 25px !important;}
.p-r-30{padding-right: 30px !important;}

.p-l-0{padding-left: 0 !important;}
.p-l-5{padding-left: 5px !important;}
.p-l-10{padding-left: 10px !important;}
.p-l-15{padding-left: 15px !important;}
.p-l-20{padding-left: 20px !important;}
.p-l-25{padding-left: 25px !important;}
.p-l-30{padding-left: 30px !important;}

.p-t-0{padding-top: 0 !important;}
.p-t-5{padding-top: 5px !important;}
.p-t-10{padding-top: 10px !important;}
.p-t-15{padding-top: 15px !important;}
.p-t-20{padding-top: 20px !important;}
.p-t-25{padding-top: 25px !important;}
.p-t-30{padding-top: 30px !important;}

.p-b-0{padding-bottom: 0 !important;}
.p-b-5{padding-bottom: 5px !important;}
.p-b-10{padding-bottom: 10px !important;}
.p-b-15{padding-bottom: 15px !important;}
.p-b-20{padding-bottom: 20px !important;}
.p-b-25{padding-bottom: 25px !important;}
.p-b-30{padding-bottom: 30px !important;}

/* 
    Margin
*/

.no-margin{margin: 0 !important;}

.m-r-0{margin-right: 0 !important;}
.m-r-5{margin-right: 5px !important;}
.m-r-10{margin-right: 10px !important;}
.m-r-15{margin-right: 15px !important;}
.m-r-20{margin-right: 20px !important;}
.m-r-25{margin-right: 25px !important;}
.m-r-30{margin-right: 30px !important;}

.m-l-0{margin-left: 0 !important;}
.m-l-5{margin-left: 5px !important;}
.m-l-10{margin-left: 10px !important;}
.m-l-15{margin-left: 15px !important;}
.m-l-20{margin-left: 20px !important;}
.m-l-25{margin-left: 25px !important;}
.m-l-30{margin-left: 30px !important;}

.m-t-0{margin-top: 0 !important;}
.m-t-5{margin-top: 5px !important;}
.m-t-10{margin-top: 10px !important;}
.m-t-15{margin-top: 15px !important;}
.m-t-20{margin-top: 20px !important;}
.m-t-25{margin-top: 25px !important;}
.m-t-30{margin-top: 30px !important;}

.m-b-0{margin-bottom: 0 !important;}
.m-b-5{margin-bottom: 5px !important;}
.m-b-10{margin-bottom: 10px !important;} 
.m-b-15{margin-bottom: 15px !important;}
.m-b-20{margin-bottom: 20px !important;}
.m-b-25{margin-bottom: 25px !important;}
.m-b-30{margin-bottom: 30px !important;}

/* 
    Border
*/

.b-b{
    border-bottom: 1px solid $gray-color;
}
.b-l{
    border-left: 1px solid $gray-color;
}
.b-r{
    border-right: 1px solid $gray-color;
}
.b-t{
    border-top: 1px solid $gray-color;
}

.b-black{
    border-color: $black-color !important;
}
.b-1{
    border: 1px solid $gray-color;
}
.b-2{
    border:2px solid $gray-color;
}
.b-3{
    border: 3px solid $gray-color;
}
.b-4{
    border:4px solid $gray-color;
}
.b-5{
    border:5px solid $gray-color;
}

.b-main{
    border-color: $main-color !important;
}
.b-second{
    border-color: $second-color !important;
}

/* 
    Font 
*/
.fs-10{font-size:10px !important}
.fs-11{font-size:11px !important}
.fs-12{font-size:12px !important}
.fs-13{font-size:13px !important}
.fs-14{font-size:14px !important}
.fs-15{font-size:15px !important}
.fs-16{font-size:16px !important}
.fs-17{font-size:17px !important}
.fs-18{font-size:18px !important}

.text-uppercase{
    text-transform: uppercase !important;
}

.text-bold{
    font-weight: bold !important;
}

 .text-normal{
    font-weight: normal !important;
}

.text-main{
    font-family: $main-font !important;
}
 
.text-second{
    font-family: $second-font !important;
}

.text-main-color{
    color: $main-color !important;
}
.text-second-color{
    color: $second-color !important;
}