@charset "utf-8";
html, body, div, a, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
outline: none;
list-style: none;
text-decoration: none;
vertical-align: baseline;
border: none;
background: none;
margin: 0;
padding: 0;
}
* { margin: 0; padding: 0;}
html, body {height: 100%;}
body {display: flex; flex-direction: column;}
main {flex: 1 0 auto;}
footer {flex: 0 0 auto;; width: 100%}


a {color:#ffdb4f}
article {max-width: 1100px; width: 90%; margin: 0 auto; margin-bottom: 10px; color: #fff}
h1 {font-size: 28px; margin: 20px 0 30px; width: fit-content;}
h1:after {content: ''; height: 3px; background: #ffdb4f; display: block; margin-top: 1%; margin-bottom: 5%;}
h2 {margin: 15px 0 20px; width: fit-content;}
article {max-width: 1100px; width: 90%; margin: 0 auto; margin-bottom: 10px; color: #fff}
article p {padding-bottom: 10px}



body{background:#211e1d;font-family: 'Myriad Pro', sans-serif;}
header {font-size: 14px; color: #fff; margin-top: 10px}
.clear{clear:both}
.clear0 {clear: both; height: 0px; width: 100%}

/*HEADER*/
.tophead {max-width: 1100px; width: 90%; margin: 0 auto; margin-bottom: 10px; display: flex}
.toplogo {width:325px}
.toplogo img {width: 95%; max-width: 318px}
.sublogo {width: calc(100% - 715px);}
.sublogo img {max-width: 218px; width: 95%}
.topcont {width: 220px;}
.toptime {width: 130px;}
.toppay {width: 40px;}
.topback {max-width: 1100px; width: 90%; margin: 0 auto; display: flex; z-index: 4; position: relative}
@media screen and (max-width: 1020px) {
.toplogo {width: calc(100% - 390px)}
.sublogo {width:0px; visibility: hidden}
}
@media screen and (max-width: 980px) {
.tophead {max-width: 1100px; width: 95%; }
.topback {max-width: 1100px; width: 95%; margin: 0 auto; display: flex; z-index: 4;}
}
@media screen and (max-width: 850px) {
.tophead {max-width: 1100px; width: 95%; }
.topback {max-width: 1100px; width: 100%; margin: 0 auto; display: flex; z-index: 999; position: unset}
}
@media screen and (max-width: 780px) {
.toplogo {width: calc(100% - 390px)}
.sublogo {width:0px; visibility: hidden}
.toptime {width: 110px;}
.toppay {width:0px; height: 0px; overflow: hidden;}
}
@media screen and (max-width: 780px) {
.toplogo {width: calc(100% - 240px)}
.topcont {width: 210px;}
.toptime {width:0px; height: 0px; overflow: hidden;}
}
@media screen and (max-width: 540px) {
.toplogo {width: calc(100% - 80px)}
.topcont {width: 0px; height: 0px; overflow: hidden;}
.toplogo img {width: 95%; max-width: 158px;}
}

/*MENU*/
.topnav {width: 100%; margin: 0 auto; background: #fff;  display: flex; z-index: 4; overflow: hidden;}
.topnav .icon {display: none;}
.nav { display: flex; justify-content: space-around; font-size: 18px; font-weight: 900; width: 100%}
.nav li a {font-family: Arial, Helvetica, sans-serif; color: #000; text-align: center; line-height: 50px; display: block; border-bottom:3px solid #fff; font-weight: 600;}
.nav li a:hover{color:#ffdb4f;border-bottom:3px solid #ffdb4f;}
.dropdown-content {display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 4;}
.dropdown-content a {float: none; color: black; padding: 12px 16px; line-height: 20px!important; text-decoration: none; display: block; text-align: left;}
.topnav a:hover, .dropdown:hover .dropbtn {}
.dropdown-content a:hover {}
.dropdown:hover .dropdown-content { display: block;}
.menu-gal {margin-left: -40px}

@media screen and (max-width: 780px) {
.topnav ul, .dropdown .dropbtn {display: none;}
.topnav {width: 100%; margin: 0 auto; background:none;  display: flex; z-index: 4; overflow: hidden;}
.topnav a.icon {float: right; display: block; position: absolute; top: 10px; right: 20px; font-size: 40px; z-index: 999}
.nav li { background: #ffdb4f; padding-left: 40px}
.nav li a {text-align: left; line-height: 30px; border-bottom:0px;}
.nav li a:hover{color:#000;border-bottom:0px solid #ffdb4f;}
.topnav.responsive {position: relative; background: #eee}
.topnav.responsive .icon { position: fixed!important; z-index: 999!important; right: 20px; top: 10px;}
.topnav.responsive ul { float: none; display: block;}
.topnav.responsive .dropdown {float: none; background: #eee}
.topnav.responsive .dropdown-content {position: relative; background: #eee}
.topnav.responsive .dropdown .dropbtn {display: block; width: 100%; text-align: left;}
.dropdown-content a {padding-left: 60px;}
.dropdown-content {box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.0);}
.dropdown li {background: #eee}
.dropdown-content a {padding: 5px 0px; line-height: 20px!important; text-align: left;}
.menu-gal {margin-left: 0px;}
}

/*COLORS*/
.colgr:after {content: ""; flex: 1 1 100%; max-width: 32%;}
.colgr div {flex: 1 1 100%; box-sizing: border-box; -webkit-box-flex: 1; max-width: 32%; margin-bottom: 20px; display: block; position: relative;}
.colgr div a img{width: 100%; height: 100%}
.colgr p {padding-bottom: 20px}
.colgr div a p{padding: 5px 10px;}
.colgr {
  box-sizing: border-box;
  max-height: 100%;
  display: flex;
  flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

.fivg {position: relative; top: -35px; width: fit-content; color: #fff; background: #000; padding: 5px 10px;}
.fivi {position: relative; font-size: 36px; line-height: 1; top: -62px; background: rgba(0,0,0,0.5); width: fit-content; padding: 14px 12px 6px!important;}
.fivis {position: absolute; font-size: 36px; line-height: 1; background: rgba(0,0,0,0.5); width: fit-content; padding: 14px 12px 6px!important;}
@media screen and (max-width: 920px) {
.colgr:after {content: ""; flex: 1 1 100%; max-width: 48%;}
.colgr div {flex: 1 1 100%; box-sizing: border-box; -webkit-box-flex: 1; max-width: 48%; margin-bottom: 20px; display: block; position: relative;}
}
@media screen and (max-width: 580px) {
.colgr:after {content: ""; flex: 1 1 100%; max-width: 100%;}
.colgr div {flex: 1 1 100%; box-sizing: border-box; -webkit-box-flex: 1; max-width: 100%; margin-bottom: 20px; display: block; position: relative;}
}


.top-im {height:250px; position:relative; top:-18px; background:url('https://kotula.com.ua/main/slajder3.jpg' ) center bottom; background-size: cover}
@media screen and (max-width: 780px) {
.top-im {top:0px; margin-bottom: 15px;}
}

/*Gallery*/
#html5-lightbox-box {width:auto; height: 95vh!important}
.html5-lightbox-box {margin: 5% auto 0px!important;}
.desk-link {width: 160px; text-transform: uppercase; padding-top: 7px; font-weight: bold; height: 30px; background-color: #ffdb4f; text-align: center; color: #000; float: right; margin: 10px 0 0 0}
.html5-elem-data-box {position: initial!important;}
.html5-title {position: absolute; left: 0px; color: #ffdb4f; font-size: 36px; line-height: 1; top: 0px; width: 80px; height: 60px; text-align: center; background: rgba(0,0,0,0.5); padding: 20px 0px 0px!important; z-index: 999}
.html5-description {position:absolute!important; right: 0px; bottom: 10px; color: #333; font-size: 16px; overflow: hidden; width: auto; text-align: left; margin: 0px; padding: 10px; background: rgba(255,251,251,0.4)}
.html5-elem-box {width: 100%; position: relative; overflow: hidden auto; margin: 0px auto; text-align: center; box-sizing: border-box; }
.html5-elem-wrap {overflow:hidden;margin:0px auto;text-align:center;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;width:100%; }
.html5-loading {display:none;position:absolute;top:0px;left:0px;text-align:center;width:100%;height:100%;background: url(https://kotula.com.ua/html5lightbox/skins/default/lightbox-loading.gif) center center no-repeat;}
.html5-loading {}
.html5-image {display:none;position:relative;top:0px;left:0px;width:100%;height:100%; padding: 0px; margin: 0px; text-align:center;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
.html5-image-container {width:100% ; }
.html5-image-img {width:100%; }
.lightboxcontainer {width:100%; text-align:left;}
.lightboxleft {width: 40%; float:left;}
.lightboxright {width: 60%; float:left;}
.lightboxright iframe { min-height: 390px;}
.divtext { margin: 36px;}
@media (max-width: 800px) {
.lightboxleft { width: 100%;}
.lightboxright { width: 100%;}
.divtext {margin: 12px;}
}
			
	  .html5-prev {width: 150px; height: 150px}
/*INDEX*/
.ind-slaider {position:relative; z-index: 2; top:-25px;}
@media screen and (max-width: 780px) {
.ind-slaider {position:relative; z-index: 2; top:0px;}
}
.owl-theme .owl-nav.disabled+.owl-dots {margin-top: -40px; z-index: 999; position: relative;}
.in-sec-2 {max-width: 1100px; width: 90%; margin: 0 auto; margin-top: 20px; margin-bottom: 10px; color: #fff; display: flex; justify-content: space-between}
.in-sec-2 .owl-theme .owl-nav.disabled+.owl-dots {visibility: hidden;}
.in-sec-2-text {width: calc(100% - 550px)}
.in-sec-2-text p {padding-bottom: 20px}
.in-sec-2-img {width: 520px;}

@media screen and (max-width: 1100px) {
.in-sec-2-img {margin-top: 60px}
}
@media screen and (max-width: 880px) {
.in-sec-2-text {width: calc(100% - 320px)}
.in-sec-2-text p {padding-bottom: 20px}
.in-sec-2-img {width: 300px;}
}
@media screen and (max-width: 800px) {
.in-sec-2{ flex-wrap: wrap}
.in-sec-2-text {width: 100%}
.in-sec-2-text p {padding-bottom: 20px}
.in-sec-2-img {width:0px; height: 0px}
}
@media screen and (max-width: 550px) {
.in-sec-2-img {width:100%; margin-bottom: 40px; margin-top: 0; height: auto}
}
.in-sec-3 {margin-top: 3%; color: white; position: relative; background-size: cover; width: 100%; background-repeat: no-repeat; padding-bottom: 4%; background-color: rgba(33,30,29,0.41); z-index: 1; padding-top: 6rem; background-position:center; background-image: url(https://kotula.com.ua/main/galer.jpg); background-attachment: fixed;}
.in-sec-3-black {width: 100%; height: 100%; background-color: rgba(33,30,29,0.41); position: absolute; z-index: 2; top: 0;}
.in-sec-3-white {max-width: 1100px; width: 90%; margin: 0 auto; margin-top: 20px; margin-bottom: 10px; color: #fff; position: relative; z-index: 3;}
.index-wrap {max-width: 1100px; width: 90%; margin: 0 auto; margin-top: 20px; margin-bottom: 10px; color: #fff}


/*INDEX NEW*/

* {box-sizing: border-box}
.tab {float: left; width: 250px;}
.tab button {display: block; padding-bottom: 15px; background-color: inherit; color: #fff; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; font-size: 1.08em; font-weight: bold}
.tab button:hover {color: #ffdb4f;}
.tab button.active {color: #ffdb4f;}
.tabcontent {float: left; padding: 0px 12px; color: #fff; width:calc(100% - 250px); border-left: none; margin-top: -50px}
.tabcontent h2 { margin-top: 0px; color: #ffdb4f;}
.tabcontent div {width: 100%; display: flex;}
.tabcontent div img {width:calc(40% - 35px); height: 100%}
.tabcontent div p {padding-bottom: 15px; width: 60%; padding-left: 35px }
.tabcontent div p a {font-weight: 600; color: #ffdb4f; float: right}
@media screen and (max-width: 780px) {
.tabcontent h2 { margin-top: 0px; color: #ffdb4f; width: 100%; text-align: center}
.tabcontent div {width: 100%; display: flex; flex-wrap: wrap}
.tabcontent div img {width:100%; height: 100%}
.tabcontent div p {padding-bottom: 15px; width: 100%; padding-left: 0px; padding-top: 20px }
}
@media screen and (max-width: 680px) {
.tab {float: left; width: auto; text-align: center; padding-bottom: 15px}
.tab button {padding: 0 10px; width: auto; display:inline; padding-bottom: 15px; }
.tabcontent {float: left; padding: 0px 12px; color: #fff; width: 100%; border-left: none; margin-top: 10px}
}

/*SERVICE*/
.serv-flex {box-sizing: border-box; max-height: 100%; display: flex; flex-direction: row;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  justify-content: space-between;
  align-items: stretch;
  align-content: stretch;
  -webkit-box-align: stretch;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;}
.serv-flex:after {content: ""; flex: 1 1 100%; max-width: 32%;}
.serv-flex .box{ flex: 1 1 100%; box-sizing: border-box; -webkit-box-flex: 1; max-width: 32%; display: block; position: relative;}

.box {border: 1px solid #ffdb4f; border-radius: 5px; color: black; background: white; margin-bottom: 2%; transition: 0.2s linear;}
.box .text {width:auto; margin-left: 20px; margin-top: 17px; position:absolute; z-index: 11; border-bottom: 3px #ffdb4f solid;}
.box .text h2 {font-size: 25px; font-weight: 300; background: rgba(255,255,255,0.30); padding-bottom: 5px; padding: 5px; color: #211e1d; font-family: Arial, Helvetica, sans-serif;}
.box_img{width:90%;height:13rem;float:right;position:relative;overflow:hidden;border-radius:5px;margin-right:5%;margin-bottom:5%;margin-top:5%;}
.box_img:after{content:'';position:absolute;width:75%;height:100%;transform:skewX(-20deg);display:block;background:white;left:-50%;z-index:10;top:0;}
.box_img {width: 90%; height: 13rem; float: right; position: relative; overflow: hidden; border-radius: 5px; margin-right: 5%; margin-bottom: 5%; margin-top: 5%;}
.box:hover .hover_img{background:rgba(255,219,79,0.90);position:absolute;width:100%;height:100%;z-index:9;transition:0.2s linear;}
.box .hover_img{/*background:rgba(255,255,255,0.50);*/position:absolute;width:100%;height:100%;z-index:9;transition:0.2s linear;}
.hover_img img {position: absolute; top: 6rem; left: 10rem; width: 0px;}
.box:hover .hover_img img {position: absolute; top: 6rem; left: 50%; width: 40px;}
.box_img img {position: absolute;}
.box_img_img01 {right: -120px;}
.box_img_img02 {right: -120px;}
.box_img_img03 {right: -70px;}
.box_img_img04 {right: -80px;}
.box_img_img05 {right: 0px;}
.box_img_img06 {right: -40px;}
@media screen and (max-width: 920px) {
.serv-flex:after {content: ""; flex: 1 1 100%; max-width: 48%;}
.serv-flex .box{ flex: 1 1 100%; box-sizing: border-box; -webkit-box-flex: 1; max-width: 48%; display: block; position: relative;}
.box_img:after{left:-40%}
}
@media screen and (max-width: 850px) {
.box_img:after{left:-50%}
}
@media screen and (max-width: 580px) {
.box_img img {position: absolute; right: -20px;}
.box_img_img05 {right: 0px!important;}
.serv-flex:after {content: ""; flex: 1 1 100%; max-width: 100%;}
.serv-flex .box{ flex: 1 1 100%; box-sizing: border-box; -webkit-box-flex: 1; max-width: 100%; display: block; position: relative;}
}
@media screen and (max-width: 540px) {
.box_img img {right: -40px;}
}
@media screen and (max-width: 500px) {
.box_img img {right: -70px;}
}

/*ABOUT*/
.about-sin {display: flex; justify-content: space-between}
.about-sin-text {width: 33%}
.about-sin-text p {padding-bottom: 20px}
.about-sin-img {width:63%}
.about-sin-img img {width:100%}

@media screen and (max-width: 1080px) {
.about-sin-text {width: 50%}
.about-sin-img {padding-top: 40px}
.about-sin-img {width:48%}
}
@media screen and (max-width: 860px) {
.about-sin { flex-flow: wrap-reverse;}
.about-sin-text {width: 100%; padding-top: 40px}
.about-sin-img {padding-top: 0px}
.about-sin-img {width:100%}
}

/*BLOG*/
.blog-box img {float: left; margin: 0 40px 40px 0; max-width: 40%; height: 100%;}
.blog-box p {padding-bottom: 10px}
@media screen and (max-width: 680px) {
.blog-box img {float: nine; margin: 0 0 20px 0; max-width: 100%; width: 680px; height: 100%;}
}

/*SERVICE*/
.serv {width:31%; float:left; margin:1%}
.serv div {width:49px; height:49px; float:left; /*border-radius:25px; border: #FF0 2px solid;; background:url('http://kotula.com.ua/main/mark.png') center no-repeat;*/}
.serv p {float:left; color: #fff; padding-top:10px; padding-left:10px; font-size:18px; font-weight:600}
.serv a p {float:left; color: #fff; padding-top:10px; padding-left:10px; font-size:18px; font-weight:600}
.serv a:hover p {color: #ffdb4f; color: rgba(0,0,0,0.23)}
.serv a p:hover {color:#ffdb4f }
/*CONTACT*/
.cont-blok {width: 100%; display: flex; justify-content: space-between}
.cont-blok div {text-align: center; width: 33%}
.cont-blok div h4 {padding-bottom: 20px; font-size: 24px}
.cont-blok div p {font-size: 18px}
@media screen and (max-width: 820px) {
.cont-blok {flex-wrap: wrap; justify-content: space-around;}
.cont-blok div {width: 50%}
.cont-blok div h4 {padding-top: 20px}
}
@media screen and (max-width: 540px) {
.cont-blok div {width: 100%}
.cont-blok div h4 {padding-top: 20px}
}
iframe {width:100%}
.key {width: 0px; height: 0px; overflow: hidden}


/*NEW PAM*/

.pam-cat-or {margin-top: 30px; box-sizing: border-box; max-height: 100%; display: flex; flex-wrap: wrap}
.pam-cat-or a {box-sizing: border-box; max-width: 32%; margin-right: 1%; margin-bottom: 20px; display: block; position: relative;}
.pam-cat-or a img {display: block; width: 100%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.pam-cat-or a p {background: rgba(0,0,0,0.5); font-size: 18px; padding: 14px 12px 6px!important; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.pam-cat-or a:hover p {background:rgba(255,219,79,0.70); font-size: 18px; padding: 14px 12px 6px!important; color: #000; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.sub-cat {}
.sub-cat-ima {display: flex; justify-content: space-between; max-width: 100%; margin-bottom: 20px; margin-top: 30px; flex-wrap: wrap}
.sub-cat-ima-link {background: #fff; height: auto; position: relative; width: 32%; margin-bottom: 20px}
.sub-cat-ima-link p {font-size: 24px; line-height: 1; position: absolute; bottom: 0px; background: rgba(0,0,0,0.5); width: fit-content; padding: 14px 12px 6px!important; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; color: #fff}
.sub-cat-ima-link:hover p {background: rgba(0,0,0,0.8); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; color: #fff}
.sub-cat-ima-link img {width: 100%}

.navi {width: fit-content; display: flex; margin: 0 auto; text-align: center; font-size: 22px; padding-bottom: 40px; }
.navi a {width: 40px; text-align: center; height: 42px; margin-left: 10px; padding-top: 8px; color: #000; background: #ffdb4f; border: 2px solid #ffdb4f; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.navi span {width: 40px; text-align: center; height: 42px; margin-left: 10px; padding-top: 8px; color: #ffdb4f;  border: 2px solid #ffdb4f;}
.navi a:hover {color: #ffdb4f;  border: 2px solid #ffdb4f; background:none; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
	
	
	
.dopam {display: flex; justify-content: space-between; flex-wrap: wrap}
.dopam div {width: 48%; justify-content: space-between; flex-wrap: wrap}

.pam-cat {box-sizing: border-box; max-height: 100%; min-width: 100%; display: flex; flex-wrap: wrap}
.pam-cat a {box-sizing: border-box; max-width: 48%; margin-bottom: 20px; display: block; position: relative;}
.pam-cat a img {display: block; width: 100%}
.pam-cat a p {background: rgba(0,0,0,0.5); font-size: 24px; padding: 14px 12px 6px!important;}
.car-cat .image {position: relative; overflow: hidden;}
.car-cat .image img {display: block; width: 100%}
.car-cat .image:before { content: ''; display: block; width: 100%; height: 100%; background: rgba(0,0,0,.2); position: absolute; top: 0; left: 0; transition: opacity .2s ease; transform: translateZ(0); opacity: 0;}
	
.pam-cat-el { justify-content: space-between; min-width: 100%; margin-top: 20px}
.pam-cat-el a img {width: 100%}
.pam-cat-el div {width: 100%; margin-top: 20px}
.pam-cat-el div p {padding-bottom: 20px}
.pam-cat-el a {width: 100%}

.blog-box {}
.blog-box a img {width: 50%; height: auto}

@media screen and (max-width: 920px) {
.pam-cat-or a p {background: rgba(0,0,0,0.5); font-size: 18px; padding: 14px 12px 6px!important;}
}
@media screen and (max-width: 680px) {
.pam-cat-or a {max-width: 100%;}
.pam-cat-or a p {font-size: 24px; text-align: center}
}
@media screen and (max-width: 680px) {
.blog-box {}
.blog-box a img {width: 100%; height: auto}
.car-cat a img {width: 100%}
}
@media screen and (max-width: 720px) {
.sub-cat-ima-link {background: #fff; height: auto; position: relative; width: 48%; margin-bottom: 20px}
}

@media screen and (max-width: 520px) {
.sub-cat-ima-link {width: 100%;}
}	
@media screen and (max-width: 920px) {
.car-cat {flex-direction: row; justify-content: space-between; align-items: stretch; align-content: stretch; -webkit-box-align: stretch; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap;}
.car-cat:after {content: ""; flex: 1 1 100%; max-width: 32%}
.car-cat article {flex: 1 1 100%; box-sizing: border-box; -webkit-box-flex: 1; margin-right: 0px; max-width: 32%; margin-bottom: 20px; display: block; position: relative;}
}
@media screen and (max-width: 830px) {
.dopam div {width: 100%; justify-content: space-between; flex-wrap: wrap}
.pam-cat:after {max-width: 48%;}
.pam-cat a {max-width: 48%;}
}
@media screen and (max-width: 560px) {
.pam-cat a{max-width: 100%;}
.pam-cat a p{text-align: center}
}


/*FOOTER*/
footer {width: 100%; background: #000}
.foot-right {line-height: 30px; color: #fff; text-align: center; max-width: 1100px; width: 90%; margin: 0 auto;}
.foot-tel {width: 0%; height: 0px; overflow: hidden}
@media screen and (max-width: 680px) {
.foot-tel {width: 100%; height: 60px; background: rgba(0,225,39,1.00); background: #ffdb4f; }
.foot-tel p {color: #000; font-size: 36px; margin-top: 15px; font-weight: 900; text-align: center;}
}

/*top button*/
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 190;
    width: 64px;
    height: 64px; font-size: 32px;
    text-align: center;
    line-height: 60px; font-weight:bold;
    color: #ffdb4f;
    cursor: pointer;
    border: 2px solid #ffdb4f;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}
#back-to-top:hover {
    background: #ffdb4f;
    color: #000;
}
#back-to-top.show {
    opacity: 1;
}
#content {
    height: 2000px;
}