/* =========================
   СБРОС СТИЛЕЙ
========================= */

*{
padding:0;
margin:0;
border:0;
text-decoration:none;
list-style:none;
box-sizing:border-box;
}



/* =========================
   ОСНОВНОЙ ШРИФТ САЙТА
========================= */

body{
font-family:Tahoma, Arial, Verdana, sans-serif;
font-size:18px;
line-height:1.4;
color:#333;

background-color:#3d3d3d;
background-image:url(../images/bg.png);
background-size:1280px 100%;
background-position:center top;
background-repeat:no-repeat;
}




/* =========================
   ОСНОВНОЙ КОНТЕЙНЕР
========================= */

.container{
width:750px;
margin:0 auto;
background:#ffffff;
border-radius:12px;

/* бирюзовое свечение */
box-shadow:
0 0 20px rgba(63,169,181,0.8),
0 0 50px rgba(63,169,181,0.6),
0 0 90px rgba(63,169,181,0.3);

animation:fadein 1s;
}

@keyframes fadein{
from{opacity:0; transform:translateY(20px);}
to{opacity:1; transform:translateY(0);}
}



/* =========================
   ВЕРХНИЙ БАННЕР
========================= */

.dl-container{
position:relative;
width:100%;
height:380px;
border-bottom:10px solid #3fa9b5;
}

.dl-element{
height:380px;
width:100%;
text-align:center;
padding-top:0px;
overflow:hidden;
position:relative;
}

.scrollable{
width:20000em;
position:absolute;
}

.scrollable .header{
width:750px;
height:380px;
float:left;
}

.dl-element img{
height:380px;
width:100%;
}


.header{
position:relative;
}





/* =========================
   ВЕРХНЕЕ МЕНЮ (ЛАПКИ)
========================= */

.navigation-links{
width:100%;
text-align:center;
background:#2b2f34;

border-top:5px solid #3fa9b5;     /* новая линия */
border-bottom:5px solid #3fa9b5;

padding-top:0px;
padding-bottom:5px;
}


.navigation-links a{
position:relative;
display:inline-block;
margin:14px 8px;
border-radius:10px;
overflow:visible;
transition:0.3s;
}

.navigation-links a img{
width:90px;
height:auto;
transition:0.3s;
}

.navigation-links a:hover img{
transform:scale(1.05);
}

/* текст под лапками */

.navigation-links a span{
position:absolute;
bottom:-22px;
left:50%;
transform:translateX(-50%);

white-space:nowrap;

color:#a9dffb;
font-size:22px;
font-weight:bold;

opacity:0;
transition:0.3s;

text-shadow:
0 2px 4px rgba(0,0,0,0.8),
0 0 8px rgba(63,169,181,0.6);
}

.navigation-links a:hover span{
opacity:1;
bottom:-18px;
}


/* =========================
   ОСНОВНОЙ КОНТЕНТ
========================= */

.content{
width:100%;
min-height:600px;
background:#eeeeee;
color:#444;
}

.content ul li{
float:left;
}


/* =========================
   ЛЕВАЯ КОЛОНКА
========================= */

li.col-left{
width:150px;
position:relative;
padding-top:80px;
}

.nav-links a{
display:block;
margin-bottom:35px;
}

.nav-links a img{
width:100px;
display:block;
margin:0 auto;
transition:0.2s;
}

.nav-links a:hover img{
transform:scale(1.25);
}

/* подписи */

.nav-links span{
display:block;
text-align:center;
font-size:22px;
font-weight:bold;
color:#1f2c2c;
margin-top:2px;
}


/* =========================
   БЛОК КОНТАКТОВ
========================= */

.contact{
position:absolute;
padding:10px 0;
width:150px;
border:3px outset;
background:#eeeeee;
transition:0.4s;
font-weight:bold;
}

.contact:hover{
transform:scale(1.8);
}

.contact p{
text-align:center;
color:#66e0ff;
line-height:1.3;
}

.contact span{
font-style:italic;
}


/* =========================
   ПРАВАЯ КОЛОНКА
========================= */

li.col-right{
width:550px;
margin:0 20px;
}

.col-right{
max-width:550px;
font-size:20px;
line-height:1.3;
color:#333;
}

.col-right p{
margin-bottom:14px;
text-indent:30px;
}


/* заголовок */

.col-right .title{
font-size:26px;
font-weight:bold;
text-align:center;
color:#1f2c2c;
padding:20px 0 15px 0;
}


/* =========================
   ЦИТАТА
========================= */

.aphorism{
margin-left:100px;
padding:10px 10px 20px 0;
text-align:center;
font-size:24px;
font-style:italic;
font-weight:bold;
color:#3fa9b5;
}


/* =========================
   СПИСОК
========================= */

.col-right .text-list li{
list-style:square inside;
padding:5px 0 5px 5px;
float:none;
}


/* =========================
   ФУТЕР
========================= */

.footer{
width:100%;
height:100px;
background:#2b2f34;
border-top:5px solid #3fa9b5;
border-bottom:5px solid #ffffff;
text-align:center;
color:#ffffff;
font-weight:bold;
}

.footer a{
display:inline-block;
margin:10px 10px 0;
color:#3fa9b5;
font-size:22px;
font-weight:bold;
}

.footer a:hover{
color:#ffffff;
}

.footer p{
padding-top:12px;
color:#3fa9b5;
font-size:22px;
}


/* =========================
   ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА
========================= */

.lang-switch{
position:relative;
top:-25px;        /* поднимает выше */
left:-20px;       /* немного левее */
text-align:right;
}

.lang-switch a{
display:inline-block;
padding:4px 8px;
margin:2px;

font-size:20px;
font-weight:bold;
text-decoration:none;

color:#3fa9b5;             /* цвет букв */
background:#ffffff;      /* белый фон */

border:1px solid #cfcfcf;
border-radius:6px;

transition:0.25s;
}

.lang-switch a:hover{
color:#ffffff;
background:#3fa9b5;
border-color:#3fa9b5;
}


/* =========================
   ЗАГОЛОВКИ
========================= */

h1,h2,h3{
font-family:Tahoma, Arial, Verdana, sans-serif;
color:#1f2c2c;
}

h3{
text-align:center;
padding:10px 0;
font-weight:normal;
}

/* =========================
  Контакты добавление текста
========================= */
.experience{
background:#f5f5f5;
padding:15px;
border-radius:8px;
margin:20px 0;
font-size:27px;
line-height:0.9; /* уменьшает межстрочный интервал */
font-family: Tahoma, Arial, Verdana, sans-serif; /* выбор шрифта */
text-align:center;
color:#333;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
}