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

@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; }
    }
}

// Colors
 .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 {
        li {
            transition: box-shadow .3s ease 0s;
             box-shadow: 0 -50px 0 rgba(0,0,0,0) inset;
             &.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: 20px;
    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: 30px;
    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;
    }
    h1{
        color: #fff;
        position: relative;
        z-index: 99;
         margin: 0;
        text-shadow: 0 2px 5px rgba(0,0,0,.1);
    }
}

.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{
        float: left; 
        width: 100%;
        h2{
        margin: 0 0 10px 0
        }
        p{
            line-height: 21px;
        }
    }
    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: 15px;
                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{
    text-align: justify;
}