@media only screen and (max-width: 600px) 
{
    
    
	html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
		font-family: inherit;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		outline: 0;
		padding: 0;
		margin: 0;
		border: 0
	}
	:focus {
		outline: 0
	}
	body {
		color: #000;
		font-family: 'Open Sans', sans-serif;
		overflow-x: hidden;
		background-repeat:no-repeat;
        background-color:#f7f7f7
	}
	ol, ul {
		list-style: none
	}
	table {
		border-collapse: separate;
		border-spacing: 0
	}
	caption, th, td {
		font-weight: 400;
		text-align: left
	}
	blockquote:before, blockquote:after, q:before, q:after {
		content: ""
	}
	blockquote, q {
		quotes: "" ""
	}
	header, nav, article, section, footer, figure, aside {
		display: block
	}
	input,  select, textarea {
		-webkit-border-radius: 0;
		border-radius: 0
	}
	.clear {
		width: 0;
		height: 0;
		margin: 0;
		padding: 0;
		line-height: 0;
		font-size: 0;
		clear: both
	}

    a {text-decoration:none}

    *:hover {transition: all .3s ease-out;}

    @keyframes bg {
    0% {
        background-size:    0 3px,
                            3px 0,
                            0 3px,
                            3px 0;
    }
    25% {
        background-size:    100% 3px,
                            3px 0,
                            0 3px,
                            3px 0;
    }
    50% {
        background-size:    100% 3px,
                            3px 100%,
                            0 3px,
                            3px 0;
    }
    75% {
        background-size:    100% 3px,
                            3px 100%,
                            100% 3px,
                            3px 0;
    }
    100% {
        background-size:    100% 3px,
                            3px 100%,
                            100% 3px,
                            3px 100%;
    }
}
	

    /* GENEL */

    .header {width:100%;background-color:#fff}
    .top-header-dis {width:100%;height:30px;border-bottom:1px solid #f4f6fd;background-color: #f8f8f8;}
    .top-header-ic {width:1100px;height:20px;padding:5px 0;margin:auto;display:none;}
    .top-sosyal {width:500px;float:left;height:20px}
    .top-sosyal li {width:30px;float:left;height:20px;text-align:center}
    .top-sosyal li a {font-size:18px;line-height:20px; color:#c1c2c6; font-weight:400}
    .top-sosyal li i {font-size:18px;line-height:20px; color:#c1c2c6; font-weight:400}
    .top-sosyal li a i.fa-facebook-f {color: #c1c2c6;}
    .top-sosyal li a i.fa-instagram {color: #c1c2c6;}
    .top-sosyal li a i.fa-twitter {color: #c1c2c6;}
    .top-sosyal li a i.fa-youtube {color: #c1c2c6;}
    .top-telefon {width:500px;float:right;height:20px;color:#333;line-height:20px;text-align:right;font-weight:600;font-size:13px}
    .top-telefon a{color:#000}
    .ust{position: fixed;top: 0;left: 0;z-index: 9999;width: 100%;}
    .yukle {height: 2px;margin-bottom: -2px;background: #3b526e;width: 0%;}
    .main .content {margin: 0 auto;overflow-x:hidden ;}
    .main {overflow-x:hidden ;}

    #logo-alani-dis {width:100%;height:100px;}
    .logo-alani {width:100%;height:100px;;margin:auto}
    .logo {width:100%;float:none;height:60px;padding:20px 0;text-align:center}
    .ustlogos {width:800px;float:left;text-align:right;height:100px;display:none;}
    
    .urunDetayTabs {width: 100%;background: #fff;border: 0;margin:auto;margin-bottom: 45px;}
    .urunDetayTabs ul.tabs {background: #b57e34}
    .urunDetayTabs p {font-size: 14px;line-height: 22px;color: #000}
    .urunDetayTabs ul.tabs li.hizala {margin-left: 0}
    .urunDetayTabs ul.tabs li {float: none;border-right: 0;width:100%;height:30px}
    .urunDetayTabs ul.tabs li:nth-child(7) {border-right: 0;}
    .urunDetayTabs ul.tabs li a {text-align: center;color: #fff;display: block;font-size: 13px;padding: 10px 0px;text-decoration: none;font-weight: 400}
    .urunDetayTabs ul.tabs li.active {border-bottom: 2px solid #3b526e !important}
    .urunDetayTabs ul.tabs li.active {background: #3b526e !important;}
    .urunDetayTabs ul.tabs li.active a {color: #fff !important;    font-weight: 700 !important}
    .tabsol {width:100%;float:none;text-align: justify;}
    .tabsag {width:100%;float:none;}
    .p20 {padding:20px;}
    
    .form {width:100%;padding:5px 0;}
.form td {padding:10px 0}

.form .btn {background-color: #ffed00 !important;margin:0 !important; color:#fff}

.datakutu {
    padding: 15px;
    width: 100%;
    border: 1px solid #c2c2c2;
    margin-bottom: 10px;
    border-radius: 6px;
    box-sizing: border-box;
}
    
    .tablolar {font-size:12px;border:0;width:400px;line-height:15px;background-color:#fff}
    .tablolar td {padding:5px 0 5px 5px}

    .whatsapp{width:53px;height:53px;position:fixed;right:20px;bottom:20px;z-index:99999999999999;background-color:#fff;padding:5px;border-radius:5px}
    .whatsapp i {font-size:60px;color:#005a2f;line-height:53px;}
    summary {
    display: list-item;
    padding: 10px 5px;
    border: 1px solid #333;
    margin-bottom: 5px;
    background-color: #fff;cursor: pointer;
}
    .footer {width:100%;background-repeat:no-repeat;position:relative;background-color:#252525;padding:35px 0 0 0;height:auto;border-top:5px solid #b57e34;overflow-x:hidden ;}
    .footer-ic {width:95%;margin:auto;position:relative}
    .footer-ic .sol-alan{width:100%;float:none;padding-top: 15px;border-right: 0;height:250px}
    .footer-ic .sol-alan a {font-size:13px;line-height:18px; color:#3b526e; font-weight:400;padding-top:15px;text-align:justify;padding-right: 0;}
    .footer-ic .sol-alan p {font-size:13px;line-height:18px; color:#fff; font-weight:400;padding-top:15px;text-align:justify;padding-right: 0;}
    .footer-ic .orta-alan{width:100%;float:none;padding:0 0;border-right:0;height:250px;box-sizing:border-box;}
    .footer-ic .orta-alan .alt-linkler li {width:150px;float:left}
    .footer-ic .anabaslik {font-size:18px;line-height:42px; color:#fff; font-weight:400}
    .footer-ic .orta-alan .alt-linkler li a{font-size:13px;line-height:34px; color:#fff; font-weight:400}
    .footer-ic .orta-alan .alt-linkler li i {font-size:12px;line-height:28px; color:#b57e34; font-weight:400;margin-right:8px}
    .footer-ic .sag-alan{width:100%;float:none;padding-left:0;height:250px}
    .footer-ic .sag-alan li {width:400px;font-size:13px;line-height:18px; color:#fff; font-weight:400;padding:5px 0 }
    .alt-adres {width:580px;margin:auto;text-align:center;font-family: 'Roboto', sans-serif; font-size:14px; line-height:28px; font-weight:300; color:#fff;padding-top:45px}
    .alt-sosyal {width:230px;height:50px;text-align:center;margin:auto;margin-top:25px}
    .alt-sosyal li {width:50px;float:left;height:50px;text-align:center;border-radius:100%;margin-right:10px;}
    .alt-sosyal li:nth-child(4) {margin-right:0}
    .alt-sosyal li a {font-size:24px;line-height:50px; color:#fff; font-weight:400}
    .alt-sosyal li i {font-size:24px;line-height:50px; color:#fff; font-weight:400}
    
    .videolist {width:100%;}
    .videolist li{width:100%;float:none;margin-right:0;height:280px}
    .videolist li iframe{width:100%;}
    .videolist li:nth-child(2n+2){margin-right:0}
    
    .KapsamTabs {width: 100%;background: #fff;border: 1px solid #dedede;margin:auto;margin:0 30px 45px 0; float:left}
    .KapsamTabs .icerik {height:auto}
    .KapsamTabs ul.tabs {background: #f8f8f8}
    .KapsamTabs p {font-size: 14px;line-height: 22px;color: #000}
    .KapsamTabs ul.tabs li.hizala {margin-left: 0}
    .KapsamTabs ul.tabs li {float: none;border-right: 0;width:100%;height:45px}
    .KapsamTabs ul.tabs li:nth-child(2) {border-right: 0;}
    .KapsamTabs ul.tabs li a {text-align: center;color: #000;display: block;font-size: 14px;padding: 15px 0px;text-decoration: none;font-weight: 700}
    .KapsamTabs ul.tabs li.active {border-bottom: 2px solid #3b526e !important}
    .KapsamTabs ul.tabs li.active {background: #3b526e !important;}
    .KapsamTabs ul.tabs li.active a {color: #fff !important;    font-weight: 700 !important}
    
    
    .ajanda{width:100%;float:left;}
    .ajanda li {width:100%;padding:5px 0;border-bottom:1px solid #ddd}
    .ajanda li .tarih {font-size: 13px;line-height: 16px;color: #000;font-weight: 400;text-decoration:none}
    .ajanda li .etkinlik {font-size: 16px;line-height: 24px;color: #000;font-weight: 600;font-family: 'Roboto', sans-serif; text-decoration:none}

    .uzunbaslik {width:1100px;margin:auto;font-family: 'Roboto', sans-serif; font-size:32px; text-align:center; line-height:60px; font-weight:300}
    .anauzunbaslik {font-family: 'Roboto', sans-serif; font-size:32px; text-align:left; line-height:42px; font-weight:300}
    .kisaarabaslik {width:500px;margin:auto;font-family: 'Roboto', sans-serif; font-size:32px; text-align:left; line-height:48px; font-weight:300}
    
    .cizgi {height:4px;background-color:#b57e34;margin-bottom:10px}
    
    .share_widget {
    padding: 0 0 10px 0;
    width: 280px;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    margin:50px auto 50px auto;
}
.share_widget ul li {
    float: left;
    line-height: 30px;
    margin-right: 8px;
    color: #999;
    font-size: 16px
}
.share_widget ul li a {
    font-weight: bold;
    font-size: 20px
}
.share_widget ul li a i {
    color: #000;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    font-size: 20px;
    text-align: center;
    transition: all 0.2s ease-in-out;
    line-height: 26px
}
.share_widget ul li a i:hover {
    opacity: .5
}


    .cerceve{width:95%;border-top:1px solid #3b526e;min-height:500px;margin:auto}
    .inner {width:95%;margin:auto;}
    .metin-alani {width:100%;margin:auto;padding:0}
    .metin-alani p {font-size:14px;line-height:24px; color:#333; font-weight:400}
    .ustyol{width:100%;margin-bottom:40px;background-color:#f4f6fd;padding:0 20px;font-size:12px;line-height:30px; color:#000; font-weight:400}
    .ustyol a {font-size:12px;line-height:30px; color:#000; font-weight:400}
    .metin-alani h1 {font-size:35px;line-height:48px;color:#000; font-weight:400; font-style: inherit;letter-spacing:-0.5px; border-left:5px solid #3b526e; padding-left:15px}
    .sol-kolon {width:100%;float:none;margin-right:0}
    .sol-kolon p{font-size:16px;line-height:30px; color:#000; font-weight:300;-webkit-font-smoothing: antialiased;margin-bottom:15px;text-align:justify}
    .sol-kolon a{color: #3b526e; font-weight:bold }
    .sag-kolon {width:100%;float:none;}
    .sag-menu-baslik {width:100%;background-color:#3b526e;padding:10px;font-size:16px;line-height:32px; color:#fff; font-weight:600;box-sizing:border-box;}
    .sag-menu {width:100%;background-color:#f4f6fd;padding:10px;margin-bottom:25px;}
    .sag-menu li {border-bottom:1px solid rgba(210,216,236,1)}
    .sag-menu li:last-child {border-bottom:0}
    .sag-menu li a {font-size:14px;line-height:28px; color:#000; font-weight:400;}
    .sag-menu li i {font-size:12px;line-height:28px; color:#000; font-weight:400;margin-right:8px}

    .sag-paylas {width:250px;height:50px;padding:15px 0; background-color:#f8f8f8}
    .sag-paylas li {width:60px;float:left;height:20px;text-align:center}
    .sag-paylas li a {font-size:24px;line-height:48px; color:#333; font-weight:400}
    .sag-paylas li i {font-size:24px;line-height:48px; color:#333; font-weight:400}

    .ucluboxwtext {display:block;margin: 45px auto 25px auto;position:relative; width:95%; }
    .ucluboxwtext li.banner {width:245px !important;float:left;margin-right:40px;background-color:#fff;overflow:hidden;height:350px}
    .ucluboxwtext li.banner .haberresim { width: 245px;height:245px;overflow:hidden; text-align: center;}
    .ucluboxwtext li.banner .baslik { width: 205px; text-align: center; padding:10px 20px}
    .ucluboxwtext li.banner .baslik a {font-size: 16px;line-height: 22px;color: #000;font-weight: 600;font-family: 'Roboto', sans-serif; text-decoration:none}
    .ucluboxwtext .bx-prev, 
    .ucluboxwtext .bx-next { height:50px; top:180px; width:50px; position:absolute; text-indent:-99999px; z-index:999;}
    .ucluboxwtext .bx-prev {background:url('https://moddability.shop/images/prev.png') no-repeat; left:-45px;background-color: none;background-position-x: center}
    .ucluboxwtext .bx-next {background:url('https://moddability.shop/images/next.png') no-repeat; right:-45px;background-color: none;background-position-x: center}
    .ucluboxwtext .bx-wrapper .bx-pager { position: absolute; bottom:55px; width: 100%; height:15px;display:none }
    .ucluboxwtext .bx-wrapper .bx-pager { text-align: left; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px; }
    .ucluboxwtext .bx-wrapper .bx-pager .bx-pager-item { display: inline-block; *zoom: 1; *display: inline; }
    .ucluboxwtext .bx-wrapper .bx-pager a { background: #333; text-indent: -9999px; display: block; width: 7px; height: 7px; margin: 0 5px 0 0; outline: 0; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; }
    .ucluboxwtext .bx-wrapper .bx-pager a:hover,
    .ucluboxwtext .bx-wrapper .bx-pager a.active { background: #F7EC16;}
    .ucluboxwtext .bx-wrapper {max-width:100% !important}
    .ucluboxwtext .bx-viewport {height:350px !important}
    .shadow {-webkit-box-shadow: 0 0 40px rgba(0,0,0,0.1);-moz-box-shadow: 0 0 40px rgba(0,0,0,0.1);box-shadow: 0 0 40px rgba(0,0,0,0.1);    }
    
    .videouclu {display:block;margin: 45px auto 25px auto;position:relative; width:95%; }
    .videouclu ul {height:auto}
    .videouclu li {width:100% !important;float:none;margin-right:0;background-color:#fff;overflow:hidden;height:250px}
    .videouclu li:nth-child(4) {margin-right:0px;}
    .videouclu li .haberresim { width: 100%;height:138px;overflow:hidden; text-align: center;}
    .videouclu li .baslik { width: 100%; text-align: center; padding:10px 20px;box-sizing: border-box;font-size: 16px;line-height: 22px;color: #000;font-weight: 600;font-family: 'Roboto', sans-serif; text-decoration:none}
    .videouclu li .baslik a {font-size: 16px;line-height: 22px;color: #000;font-weight: 600;font-family: 'Roboto', sans-serif; text-decoration:none}
    
    
    .adimlartext {display:block;margin: 45px auto 65px auto;position:relative; width:1100px; }
    .adimlartext li.banner {width:365px !important;float:left;margin-right:0;overflow:hidden;position:relative;}
    
    .adimlartext li.banner .ic {width:295px;background-color:#fff;padding:10px;height:475px}
    .adimlartext li.banner .ok {width:50px;height:100px;top:180px;right:0;position:absolute;background-image:url(https://moddability.shop/images/maviok.png)}
    .adimlartext li.banner .ic .baslik {font-size: 16px;line-height: 38px;color: #000;font-weight: 600;font-family: 'Roboto', sans-serif; text-decoration:none}
    .adimlartext li.banner .ic p {font-size: 14px;line-height: 18px;color: #000;font-weight: 400;font-family: 'Roboto', sans-serif; text-decoration:none}
    .adimlartext .bx-prev, 
    .adimlartext .bx-next { height:50px; top:265px; width:50px; position:absolute; text-indent:-99999px; z-index:999;}
    .adimlartext .bx-prev {background:url('https://moddability.shop/assets/images/prev.png') no-repeat; left:-45px;background-color: none;background-position-x: center}
    .adimlartext .bx-next {background:url('https://moddability.shop/assets/images/next.png') no-repeat; right:-45px;background-color: none;background-position-x: center}
    .adimlartext .bx-wrapper .bx-pager { position: absolute; bottom:55px; width: 100%; height:15px;display:none }
    .adimlartext .bx-wrapper .bx-pager { text-align: left; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; padding-top: 20px; }
    .adimlartext .bx-wrapper .bx-pager .bx-pager-item { display: inline-block; *zoom: 1; *display: inline; }
    .adimlartext .bx-wrapper .bx-pager a { background: #333; text-indent: -9999px; display: block; width: 7px; height: 7px; margin: 0 5px 0 0; outline: 0; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; }
    .adimlartext .bx-wrapper .bx-pager a:hover,
    .adimlartext .bx-wrapper .bx-pager a.active { background: #F7EC16;}
    .adimlartext .bx-wrapper {max-width:1100px !important}
    .adimlartext .bx-viewport {}
    .shadow {-webkit-box-shadow: 0 0 40px rgba(0,0,0,0.1);-moz-box-shadow: 0 0 40px rgba(0,0,0,0.1);box-shadow: 0 0 40px rgba(0,0,0,0.1);    }
    
   #text{
display:none;
}

 #text1{
display:none;
}

 #text2{
display:none;
}

button{
  user-select:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  cursor:pointer;
  border:none;
  padding:8px;
  font-size:20px;
  background:linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
  color:white;
  font-family:cursive;
  box-sizing:border-box;
}

    /*ANA SAYFA*/
    .anabanner-dis {max-width:1400px;margin:auto;height:470px;background-color:#fff;margin-bottom:50px}
    .anabanner {display:block; margin:0 auto; position:relative; width:1100px;height:450px}
    .anabanner li.banner {width:100%;height:100%;position:relative}
    .anabanner .bx-prev, 
    .anabanner .bx-next { height:50px; top:190px; width:50px; position:absolute; text-indent:-99999px; z-index:99;}
    .anabanner .bx-prev {background:url('https://moddability.shop/images/bprev.png') no-repeat; left:-45px;background-color: none;background-position-x: center}
    .anabanner .bx-next {background:url('https://moddability.shop/images/bnext.png') no-repeat; right:-45px;background-color: none;background-position-x: center}
    .anabanner .bx-wrapper .bx-pager { position: absolute; bottom:-17px; width: 51px; height:15px;left:46% }
    .anabanner .bx-wrapper .bx-pager { text-align: left; font-size: .85em; font-family: Arial; font-weight: bold; color: #666; background-color:#fff;border-radius:5px;padding:10px;border-top:1px solid #00b1ff }
    .anabanner .bx-wrapper .bx-pager .bx-pager-item { display: inline-block; *zoom: 1; *display: inline; }
    .anabanner .bx-wrapper .bx-pager a { background: #333; text-indent: -9999px; display: block; width: 7px; height: 7px; margin: 0 5px; outline: 0; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%;line-height:7px }
    .anabanner .bx-wrapper .bx-pager a:hover,
    .anabanner .bx-wrapper .bx-pager a.active { background: #00b1ff !important; }

    .text-white {    color: #fff !important;}
    .text-theme-colored {    color: #b57e34 !important;}


    .repair-alan-dis {width:100%;padding:40px 0; background-color:#fdfdfd;margin:25px 0}
    .repair-alan {width:1100px;margin:auto}
    .repair-alan-sol {width:500px;float:left;padding:50px 0}
    .repair-alan-sag {width:550px;float:left;padding:25px 0px 25px 50px}
    .repair-alan-sag .satir {width:550px;height:100px;margin-bottom:15px}
    .repair-alan-sag .yuvarlak {width:90px;height:90px;float:left;background-color:#fff;border-radius:100%; background-repeat: no-repeat;}
    .repair-alan-sag .bilgiler {width:440px;height:90px;float:left;padding:10px 0 0 20px}
    .repair-alan-sag .satir p {font-size: 18px;line-height: 28px;color: #000;font-weight: 400;font-family: 'Roboto', sans-serif;}
    .repair-alan-sag .satir span {font-size: 14px;line-height: 18px;color: #000;font-weight: 300;font-family: 'Roboto', sans-serif;}

    .iletisimback {width:100%;height:200px;background-color:#3b526e;margin-bottom:45px;padding:10px 0}
    .iletisimback-ic {width:95%;margin:auto;text-align:right;background-image:url(https://moddability.shop/images/iletisimback.png);background-position-x:center;height:200px}
    .iletisimback-ic .icerik {width:100%;float:right;padding:50px 0;color:#fff}
    .iletisimback-ic .icerik a{font-family: 'Roboto', sans-serif; font-size:24px; line-height:40px; font-weight:400;color:#fff}
    .iletisimback-ic .icerik i{font-size:24px; line-height:40px; font-weight:400;color:#c7080e;margin-right:15px}

    .dondurulecekler {perspective: 1000;float:left;margin-right:40px}
    .dondurulecekler:hover .tetikleyici, .dondurulecekler.hover .tetikleyici {    transform: rotateY(180deg);}
    .dondurulecekler, .onyuz{    width: 245px;    height: 245px;}
    .onyuz {    z-index: 2;    transform: rotateY(0deg);}
    .arkayuz {background-color:#5bc0de;text-align:center;color:white; width: 145px;height: 195px; padding:25px 50px; box-shadow:inset 0px 0px 0px 5px #46b8da; transform: rotateY(180deg);}
    .tetikleyici {transition: 0.4s; transform-style: preserve-3d; position: relative;}
    .onyuz, .arkayuz {    backface-visibility: hidden;    position: absolute;    top: 0;    left: 0;}
    .arkayuz h1{font-size:20px;    color:white;    font-weight:700;}
    .arkayuz hr{    border:1px solid #46b8da;    margin:15px 0;}
    .arkayuz p{    font-size:16px;    color:white;    line-height:170%;}
    
    .besli {width:95%;padding:10px 0 0 0;height:auto;margin:auto;margin-bottom:45px}
    .besli li {float:left;position:relative;width:45%;text-align:center;height:190px;margin-right:25px;background-color:#fff;margin-bottom:10px}
    .besli li:nth-child(even) {float:right;margin-right:0}
    .besli li img{width:100%}
    .besli li:nth-child(5) {margin-right:0}
    .besli li i{font-size:50px;line-height:70px;color:#fff}
    .besli li a{font-size:16px;line-height:30px;color:#000;font-weight:600;}
   
    
    .altsayfa {width:95%;margin:auto}
    .altsayfa h1 {font-size:24px;line-height:28px;color:#000; font-weight:400; font-style: inherit;letter-spacing:-0.5px; border-left:5px solid #3b526e; padding-left:15px}
    .kutular {width:1100px;padding:10px 0 0 0;margin:auto;margin-bottom:45px}
    .kutular li {float:left;position:relative;width:260px;text-align:center;height:360px;margin-right:20px;}
    .kutular li:last-child {margin-right:0}
    .kutular li .resim { width: 260px;height:200px;overflow:hidden; text-align: center;}
    .kutular li .adi { width: 240px; text-align: center; padding:10px 20px}
    .kutular li .adi a {font-size: 16px;line-height: 22px;color: #000;font-weight: 600;font-family: 'Roboto', sans-serif; text-decoration:none}
    
    .anamenu {width:100%;height:50px;background-color:#b57e34;-webkit-box-shadow:0 1px 4px -2px #3330;
    box-shadow: 0 1px 4px -2px #333;}
    

    .sticky {position: fixed;top: 0; width: 100%;background-color:#fff;z-index:999;-webkit-box-shadow: 0px 0px 10px 0px rgba(210,216,236,1);-moz-box-shadow: 0px 0px 10px 0px rgba(210,216,236,1);box-shadow: 0px 0px 10px 0px rgba(210,216,236,1);}
    .sticky + .content { padding-top: 60px;}
    
    #cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index:999;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  background-color:transparent;
  width:1100px;
  margin:auto
}

#cssmenu > ul > li {
  float: left;
  text-align:center;
  
}

#cssmenu > ul > li:hover {
  background-color:#b57e34
}

#cssmenu > ul > li:first-child {
background-color:#3b526e
}

#cssmenu > ul > li:hover {
background-color:#3b526e
}

#cssmenu > ul > li:first-child > i {
  font-size:22px;
  line-height:50px;
  padding:0 25px;
  color: #fff;
  
}

#cssmenu > ul > li:first-child > a {
  font-size:14px;
  line-height:50px;
  padding:0 25px;
  letter-spacing: -0.2px;
  text-decoration: none;
  color: #fff;
  font-weight:700;
}

#cssmenu > ul > li > a {
  font-size:14px;
  line-height:50px;
  padding:0 20px;
  letter-spacing: -0.2px;
  text-decoration: none;
  color: #fff;
  font-weight:700;
}

#cssmenu > ul > li:hover > a {
  color: #fff;
}

#cssmenu li:hover > ul {
  left: auto;
  width:260px;
}

#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  background-color:#fff;
  padding-top:25px;
  margin-left:-1px;
  -webkit-box-shadow: 0 0 4px rgba(0,0,0,.2);
    box-shadow: 0 0 4px rgba(0,0,0,.2);
    box-sizing: border-box;
}

#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
  text-align:left
}

#cssmenu ul ul li {
  height: 35px;
  padding:0 10px;
}

#cssmenu ul > li > ul > li > a {
  padding: 8px 8px;
  font-size: 12px;
  text-decoration: none;
  color: #333;
  background: #fff;
  letter-spacing:0px;
  text-align:left
}

#cssmenu ul ul li a:hover {
  background: #3b526e;
  color:#fff
}

#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #ffed00; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  height:43px
}
.sidenav {display:block}
.hamburger {display:block}
.anamenu {display:none}
#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

.book {
    font-size: 22px;
    letter-spacing: 0;
    font-weight:400;
    color: #333;
    text-transform: none;
    width:215px;
    height:40px;
    float:left;
    background-image: url(https://en.silmoparis.com/theme/silmoparis_desktop/images/icons/ico-card.png);
    background-repeat:no-repeat;
    margin:25px 0 0 200px;
    padding-left:50px;
    line-height:35px;
    font-family: 'siml023', cursive;
    display:block;
    text-decoration:underline
}

.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #b57e34; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  display:block
}

.sari {background-color: #3b526e;}

.hamburger {position:absolute;left:15px;top:8px;display:block}
.hamburger i{font-size:18px}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 14px;
  color: #fff;
  display: block;
  transition: 0.3s;
  
}



/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s;
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

@mixin states($color: $default) {
	border-color: $color;
	color: rgba(255, 255, 255, 0.9);
	background: $color;

	&:hover {
		border-color: $color;
		color: rgba(255, 255, 255, 0.6);
	}
	&:active {
		color: rgba(255, 255, 255, 0.9);
		border-color: darken($color, 10%);
	}
}

// Collapse / Expand Component
details {
	@include states($default);
	border: 1px solid;
	cursor: pointer;
	transition: background 0.3s;
	border-radius: 4px;
	min-height: 48px;
	max-height: 60px;
	transform-origin: top center;
	transform: rotate(0.1deg);
	transition: all 0.3s;

	::-webkit-details-marker {
		display: none;
	}

	+ details {
		margin-top: 10px;
	}

	p {
		color: #fefefe;
		line-height: 1.7;
		margin: 10px 0 0;
		padding: 0 20px 15px;
	}

	// Primary Style
	&.primary {
		@include states($primary);
	}

	// Success Style
	&.success {
		@include states($sucess);
	}

	// Square Style
	&.square {
		border-radius: 0;
	}

	&[open] {
		transition: all 0.6s;
		min-height: 100px;
		max-height: 200px;
	}
}

summary {
	outline: none;
	font-size: 16px;
	padding: 13px;
	font-weight:700;
	&:selection {
		background: transparent;
	}

	&:after {
		margin-top: 2px;
		content: "➕";
		float: left;
		margin-right: 11px;
		text-align: center;
		font-size: 11px;

		[open] & {
			padding: 0 0 12px 0;
			content: "➖";
		}
	}
}

}