/*
supptr css created by ahmetd - kumrudnd
2025.12.09
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

html {
  scroll-behavior: smooth;
  overflow-y:scroll;margin:0;
}

.clr{clear:both;}
a{text-decoration: none;}

:root{
  --red01: #ffecec;
  --red02 : #bf1e2d;/*bf1e2d*/
  --red03 :#eb1b1e;

  --green01 : #41b157;
  --green02: #2ca143;

  --blue01 : #f8f9fa;
  --blue02: #eef4f7;
  --blue03 : #2a76dd;
  --blue04 : #1560c7;

  --navy-blue : #1e2d5d;

  --yellow01 : #ffc107;
  --orange01 : #fbf3db;

  --background:#f4f6f8;
  --background02: #e9eef3;
  --main-color: #192e44;
  --second-color: #fe4f2f;
  --blue01: #2a76dd;
  --blue-light: #d0e4fc/*e3f2fd - d1e5ff*/;
  --blue-lightest: #f7f9fd;
  --dark-grey: #333333;
  --yellow:#ffc000;
  --yellow01 : #ffc107;
  --red: #eb1b1e;
  --soft-red: #f44336;/*#dc3545;*/
  --green: #28a745;
}

body{margin:0;padding:0;float:left;width:100%;height:100%;font-size:15px;font-family: "Montserrat", sans-serif;font-weight:400;background: #fff;color:#111;}


#logo-top-menu-outer{position:relative;width:100%;margin:0;padding:0;border-bottom:1px solid #eee;}
#logo-top-menu-holder{width:90%;height:90px;position:relative;margin:0 auto;display:flex;justify-content: space-between;}
#logo{float:left;margin:30px 0;margin-bottom:0;z-index:8;font-size:21px;font-weight: 600;color:var(--main-color);}
#logo-slogan{/*width:100%;*/text-align: center;font-size: 10px;font-weight: 400;color:#444;margin-left:-4px;}

#logo a:link,#logo a:visited{color:var(--main-color);}

/* mobile menu */
	   
#mobile-menu-bar{display:none;}
#mobile-menu-links-holder{display:none;}
#top-menu-holder-mobile{display:none;}

#top-menu-holder{float:left;margin-top:30px;/*width:44%;margin:0 0 0 100px;*/border:0px solid #000;}
a.top-menu-link:link,a.top-menu-link:visited{float:left;margin:0 15px;padding:5px;font-size:14px;color:var(--main-color);border-radius:5px;transition: all 0.3s;}
a.top-menu-link:hover{background:var(--main-color);color:#fff;}

a.top-menu-link-active:link,a.top-menu-link-active:visited {float:left;margin:0 15px;padding:5px;font-size:14px;background:var(--main-color);color:#fff;border-radius:5px;transition: all 0.3s;}
a.top-menu-link-active:hover{background:var(--main-color);color:#fff;}

#log-reg-holder{float:right;width:210px;margin-top:30px;}
a.giris:link,a.giris:visited{float:left;width:90px;background:#fff;color:var(--main-color);margin:0 5px;padding:10px 0;border:1px solid #e1e1e1;border-radius:5px;text-align:center;font-size: 13px;font-weight: 600;transition: all 0.3s;}
a.giris:hover{border:1px solid var(--main-color);}
a.kayit:link,a.kayit:visited{float:left;width:90px;border:1px solid var(--main-color);background:var(--main-color);color:#fff;margin:0 5px;padding:10px 0;border-radius:5px;text-align:center;font-size: 13px;font-weight: 600;transition: all 0.3s;}
a.kayit:hover{background: transparent;color:var(--main-color);}

#log-in-out-holder{float:right;width:20%;margin:30px;margin-right: 0;display:flex;justify-content: flex-end;align-items: center;}
a.hello:link,a.hello:visited{display:flex;justify-content: space-between; align-items: center; float:left;background:#fff;color:var(--main-color);margin:0 5px;padding:10px 10px;border:1px solid #e1e1e1;border-radius:5px;font-size: 13px;font-weight: 600;transition: all 0.3s;}
a.hello:hover{border:1px solid var(--main-color);}
a.bye:link,a.bye:visited{float:right;border:1px solid var(--red);background:var(--red);color:#fff;margin:0 5px;padding:10px;border-radius:5px;text-align:center;font-size: 13px;font-weight: 600;transition: all 0.3s;}
a.bye:hover{background: transparent;color:var(--red);}


#spotlight{float:left;width: 100%;height:100%;background:#f0f1f5;color:var(--second-color);padding:60px 0 60px 0;text-align:center;}
	#spotlight h1{font-size:60px;font-weight: 400;}
    #spotlight-link-holder{width:90%;margin:30px auto;display:flex;justify-content: center; align-items: center; flex-wrap: wrap;}
    a.category-links:link {float:left;margin:5px;padding:5px;color:var(--main-color);border:1px solid var(--main-color);border-radius: 10px;}
    a.category-links:visited {color:var(--main-color);border:1px solid var(--main-color);}
    a.category-links:hover{background:var(--main-color);color:#fff;}

    a.category-links-active:link {padding:5px;background:var(--main-color);color:#fff;border:1px solid var(--main-color);border-radius: 10px;}
    a.category-links-active:visited {padding:5px;background:var(--main-color);color:#fff;border:1px solid var(--main-color);border-radius: 10px;}
    a.category-links-active:hover{background:var(--main-color);color:#fff;}

#spotlight-search-holder {
    width: 50%;
    margin: 10px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* FORM FLEX!! */
.search-form {
    display: flex;
    align-items: center;
}

.form-input-search-site {
    height: 30px;
    margin: 0 10px;
    display: block;
    color: #495057;
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    padding: 0 10px;
}

.form-input-search-site:focus {
    background-color: #fdf6db;
    outline: 0;
}

#spotlight-search-holder-button {
    margin: 0 10px;
    height: 28px;
    padding: 0 15px;
    border-radius: 5px;
    background:transparent;
    border:1px solid var(--main-color);
    cursor: pointer;
    transition: all 0.3s;
}
#spotlight-search-holder-button:hover{background: var(--main-color);color:#fff;}


 .muted{color:#666;font-size:0.95rem}
 .note{background:#f9f9f9;border-left:4px solid #e0e0e0;padding:10px;margin:10px 0;}

.content-outer{float:left;width: 100%;height: 100%;margin:0;padding-top:30px;padding-bottom:10px;margin-bottom:10px;}
.content-inner{width:90%;height:100%;margin:10px auto;padding:15px;overflow: auto;border: 0px solid #eee;border-radius: 5px;}
.content-inner-eighty{width:80%;height:100%;margin:10px auto;padding:30px;overflow: auto;border: 0px solid #eee;border-radius: 5px;}

.white-bg{background: #fff;}
.colored-bg{background: var(--background);}
.shadow{box-shadow:0px 5px 15px  #e1e0e0;}
.section-title{float: left;width: 100%;height: 30px;margin:30px auto;text-align: center;font-size: 30px;color:var(--main-color); font-family: 'Ubuntu', arial;font-weight: 600;}


#home-latest-website-list-holder{display:flex;justify-content:center;align-items:center;flex-direction:column;flex-wrap:wrap;width:80%;height:100%;margin:60px auto;border:0px solid #000;}
.latest-websites-list-item{float:left;width:100%;margin:10px 0;background:#fff;border:1px solid #eee;border-radius:5px;padding:5px;box-sizing:border-box;}
.latest-websites-list-item-title{float:left;margin:5px;font-size:14px;font-weight: 600;}
.latest-websites-list-item-content{display:none;float:left;margin:5px;font-size:12px;font-weight: 400;}
.latest-websites-list-item-content-text{float:left;margin:30px 0 10px 5px;}

#visit_accept{float:left;margin:10px 5px 10px 25%;padding:5px;background:#fff;border:1px solid #eee;border-radius: 5px;color:var(--main-color);cursor:pointer;}
#visit_decline{float:left;margin:10px 5px 10px 10px;padding:5px;background:var(--red);border:1px solid var(--red);border-radius: 5px;color:#fff;cursor:pointer;}

.lw-url{float:left;margin-left:5px;font-size:11px;color:#666;}
.latest-websites-list-item-website-categories {float:left;margin: 5px;padding:5px;border:1px solid var(--main-color);border-radius:10px;font-size: 12px;color: #555;}

/* login -register pages */
.register-page-title{display:table;margin:30px auto;text-align:center;background:var(--blue-light);color:var(--main-color);padding:10px 30px;border-radius:10px;}
#register-area{display: flex;justify-content:center;align-items:center;flex-wrap:wrap;width:80%;height:100%;margin:0 auto;padding-bottom:10px;}
#login-area{height:100%;margin:30px auto;}
.register-input-area{float:left;width:45%;height:100px;padding:10px;box-sizing: border-box;}
.register-login-label{float:left;height: 18px;margin:4px 4px 4px 0;padding:4px 10px 4px 4px;border-radius:5px;font-size:12px;color:var(--main-color);}
.login-input{float:left;width:90%;height:45px;line-height: 18px;border-top:none;border-right:none;border:1px solid #eee;background:#fff;}
.login-input:focus{border:1px solid var(--blue-light);outline: none;box-shadow: 0 0 1px #e1c6e0;}

.register-input{float:left;width:90%;height:45px;line-height: 18px;border-top:none;border-right:none;border:1px solid #eee;background:#fff;}
.register-input:focus{border:1px solid var(--blue-light);outline: none;box-shadow: 0 0 1px #e1c6e0;}
.register-input::placeholder{color:#888;}


#register-button{display:block;margin:30px auto;width:30%;padding: 10px 15px;background: var(--main-color);border:1px solid var(--main-color);border-radius: 3px;color:#fff;cursor: pointer;transition: all 0.3s;}
#register-button:hover{background: #fff;color:var(--main-color);}

#login-button{display:block;float:left;margin-top:15px;margin-left:10px;padding: 10px 15px;background: var(--main-color);border:1px solid var(--main-color);border-radius: 3px;color:#fff;cursor: pointer;transition: all 0.5s;}
#login-button:hover{background: #fff;color:var(--main-color);}

#register-login-area .note{display: block;width:80%;margin:10px auto;}


#links-page-left-col{float:left;width:200px;height:100%;border:0px solid var(--main-color);}
.advertisement{width:100%;height:600px;background:#eee;}
#links-page-main-col{float:left;margin-left:30px;width:80%;}
#links-page-latest-website-list-holder{display:flex;justify-content:center;align-items:center;flex-direction:column;flex-wrap:wrap;width:96%;height:100%;margin:0 auto;border:0px solid #000;}
#links-page-latest-website-list-holder h2{color:var(--main-color);}


#country-filter-holder{margin:10px auto;display:flex;justify-content: center;align-items: center;flex-direction: column;}

/* USER AREA */

#where-i-am{float:left;width: 100%;display: flex;justify-content: space-between;align-items: center;}
.user-area-title {float:left;background:var(--main-color);color:#fff;border:1px solid var(--main-color);border-radius:5px;padding:5px 10px;}

#add-website-button{background: var(--main-color);color: #fff;border:1px solid var(--main-color);border-radius: 3px;padding:5px 10px;cursor:pointer;}
#add-website-button svg{float:left;margin:2px;stroke:#fff;}

#add-website-button a:link,#add-website-button a:visited{color:#fff;}

#add-website-button:hover{background: transparent;color: var(--main-color);}
#add-website-button:hover svg{stroke:var(--main-color);}
#add-website-button:hover a:link{color:var(--main-color);}
#add-website-button:hover a:visited{color:var(--main-color);}


#user-area-website-list-holder{float:left;width:100%;height:100%;margin:30px auto;border:0px solid #000; display:table;}
.my-website-list-item{float:left;width:100%;display:flex;justify-content:space-between;align-items:center;margin:10px 0;background:#fff;border-radius:5px;padding:5px;box-sizing:border-box;}
.my-website-list-item-title{float:left;margin:5px;font-size:14px;font-weight: 600;}
.my-website-list-item-content{float:left;margin:5px;font-size:12px;font-weight: 400;}

.mw-url{float:left;margin-left:5px;font-size:11px;color:#666;}
.website-categories {float:left;margin-left:5px;margin-top: 5px;font-size: 12px;color: #555;}

.website-active{background:var(--green);color:#fff;padding:5px 10px;border-radius:30px;cursor:pointer;}
.website-inactive{background:var(--dark-grey);color:#fff;padding:5px 10px;border-radius:30px;cursor:pointer;}
.website-pending{background:var(--dark-grey);color:#fff;padding:5px 10px;border-radius:30px;cursor:pointer;}

#add-website-area{float:left;width:90%;}

.form-group{float:left;width:50%;padding:15px 0;}
.form-group-eighty{float:left;width:80%;height:100%;padding:15px 0;}

.form-group label{float:left;width:100%;font-size:14px;color:#232323;display: inline-block;margin-bottom: .5rem;}
.form-group-eighty label{float:left;width:100%;font-size:14px;color:#232323;display: inline-block;margin-bottom: .5rem;}

.form-input{float:left;width:90%;height: 30px;display: block;color: #495057;background-color: #fff;
	border:0px;border: 1px solid #e1e1e1;border-radius: 5px;}
	.form-input:focus{background-color: #fdf6db;outline:0px;}
.form-input:focus::placeholder {color: #888;opacity: 1; /* Firefox */}
.form-input:focus::-ms-input-placeholder { color: #888; /* Microsoft Edge */ }

.form-input:disabled{background:#eee;}
.form-group small{display:block;color:#343434;}

.form-select {float:left;height:30px;border:1px solid #ccc;border-radius:3px;background:#fff;}
.form-textarea{float:left;width: 100%;;height:100px;border:1px solid #ccc;border-radius:3px;padding:0;}



#category_suggestions {
  float:left;
    border: 1px solid #ddd;
    padding: 5px;
    list-style: none;
    background: white;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
}

#category_suggestions li {
    padding: 5px;
    cursor: pointer;
}

#category_suggestions li:hover {
    background: #f2f2f2;
}

.cat-chip {
    display: inline-block;
    background: var(--blue-light);
    padding: 4px 8px;
    margin: 10px 5px 10px 0;
    border-radius: 4px;
    cursor: pointer;
}


.custom-modal {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:999;}
.custom-modal-content {
    background:#fff;padding:20px;width:600px;margin:10% auto;border-radius:8px;position:relative;
}
.close-modal {position:absolute;top:10px;right:15px;cursor:pointer;font-size:30px;}


.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.modal-box {
    background: #fff;
    padding: 20px;
    width: 300px;
    border-radius: 10px;
    text-align: center;
}
.modal-actions button {
    margin: 10px;
}
.btn-danger { background: #d9534f; color: #fff; padding: 8px 12px; border: none; cursor:pointer;}
.btn-light { background: #ccc; padding: 8px 12px; border: none; cursor:pointer;}


/* PROMOTE PAGE */

#promoted-page-left{float:left;width:40%;margin-top:60px;}
#promoted-page-right{float:left;width:45%;margin-left:4%;margin-top:60px;}

#website-info-area{float:left;width:90%;height:100%;margin:30px 0;}
#promote-box{float:left;width:90%;height:100%;margin:30px 0;}
#promotion-note{float:left;margin-top:30px;color:#333;}


/* EDIT PAGE */

#edit-page-left{float:left;width:50%;margin-top:60px;}
#edit-page-right{float:left;width:45%;margin-left:4%;margin-top:60px;}



.success-note {width: 30%;margin: 15px auto;padding: 15px;background: var(--green);border-radius: 5px;color: #fff;}
.error-note {width: 30%;margin: 15px auto;padding: 15px;background: var(--soft-red);border-radius: 5px;color: #fff;}
.note-delete {float: right;cursor: pointer;}
.warnings {position:fixed;top:15%;left:30%;z-index:99;transition: all 0.5s;}

.warning-yellow{background:var(--yellow);padding:10px;border-radius: 5px;}


/* FOOTER */
#footer-outer{float:left;width: 100%;height:100%;margin:0;padding: 0 0 30px 0;background:#fff;}
#footer-inner{width: 90%;margin:0 auto;padding:30px 0;border-top:1px solid #eee;display: flex;justify-content: space-between;align-items: center;}
#footer-left{float:left;}
#footer-left img{height:auto;}
#footer-middle{float:left;height:40px;}
/*#footer-middle a{float:left;width: 100%;clear:both;margin:10px 0;}*/
#footer-right{float:left;}

a.footer-link:link,a.footer-link:visited{float:left;margin:10px;color:var(--main-color);border-bottom:1px dotted var(--main-color);font-weight: 600;}
a.footer-link:hover{color:var(--main-color02);border-bottom:1px dotted var(--main-color02);}



.cookie-banner {
        position: fixed;
        bottom: 20px;
        right: 20px;
        max-width: 360px;
        background: #fff;
        color: #222;
        padding: 22px;
        border-radius: 12px;
        box-shadow: 0 4px 18px rgba(0,0,0,0.18);
        z-index: 99999;
        font-family: system-ui, Arial, sans-serif;
        transition: all .3s ease;
    }

    .cookie-banner.hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
    }

    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .cookie-banner {
            background: var(--main-color);
            color: #eee;
        }
        .cookie-banner a {
            color: #fff;
            text-decoration: underline;
        }
    }

    .cookie-banner h4 {
        margin: 0 0 8px;
        font-size: 18px;
        font-weight: 600;
    }

    .cookie-banner p {
        margin: 0 0 16px;
        font-size: 14px;
        line-height: 1.5;
    }

    .cookie-actions {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }

    .btn {
        padding: 8px 14px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        transition: 0.2s ease;
    }

    .btn.reject {
        background: #eee;
        color: #333;
    }

    .btn.reject:hover {
        background: #ddd;
    }

    .btn.accept {
        background: #3a7afe;
        color: #fff;
    }

    .btn.accept:hover {
        background: #2e63d7;
    }

/* FOOTER ENDS */	




/* CUSTOM LINKS */
a.logout-link:link,a.logout-link:visited{background:var(--red);padding:4px; color:#fff;text-decoration: none;font-weight:600;transition:border 0.5s;border:1px solid #EB1B1E;border-radius: 3px;}
a.logout-link:hover{border:1px solid var(--red);background:transparent;color:var(--red);}

a.custom-link-blue:link,a.custom-link-blue:visited{color:var(--blue03);font-weight:600;}
a.custom-link-blue:hover{border-bottom:1px dotted var(--blue03);}

a.custom-link-dark-grey:link,a.custom-link-dark-grey:visited{color:var(--dark-grey);font-weight:600;}
a.custom-link-dark-grey:hover{border-bottom:1px dotted var(--dark-grey);}

a.custom-link-black:link,a.custom-link-black:visited{color:#000;font-weight:600;border-bottom:1px dotted #444;}
a.custom-link-black:hover{border-bottom:1px dotted #000;}

a.custom-link-red:link,a.custom-link-red:visited{color:var(--red);font-weight:600;border-bottom:1px dotted var(--red);}
a.custom-link-red:hover{border-bottom:1px dotted var(--red);}

a.custom-link-white:link,a.custom-link-white:visited{color:#fff;font-weight:600;border-bottom:1px dotted #fff;}
a.custom-link-white:hover{border-bottom:1px solid #fff;}

a.custom-link-main-color:link,a.custom-link-main-color:visited{text-decoration: none;color:var(--main-color);font-weight:600;padding:3px 0;border-bottom: 1px dotted var(--main-color);}
a.custom-link-main-color:hover{border-bottom:1px dotted var(--main-color);}

a.custom-link-green:link,a.custom-link-green:visited{text-decoration: none;color:var(--green);font-weight:600;padding:3px 0;border-bottom: 1px dotted var(--green);}
a.custom-link-green:hover{border-bottom:1px dotted var(--green);}


.submit-button-green{background:var(--green);padding:10px 15px;color:#fff;border:1px solid var(--green); border-radius: 3px;cursor:pointer;transition: all 0.2s;}
.submit-button-green:hover{background:#fff;border:1px solid var(--green);color:var(--green);}

.submit-button-red{background:var(--red);padding:10px 15px;color:#fff;border:1px solid var(--red); border-radius: 3px;cursor:pointer;transition: all 0.2s;}
.submit-button-red:hover{background:#fff;color:var(--red);border:1px solid var(--red);}

.submit-button-blue-light{background:var(--blue-light);margin:15px;padding:10px 15px;color:#000;border:1px solid var(--blue-light); border-radius: 3px;cursor:pointer;transition: all 0.2s;}
.submit-button-blue-light:hover{background:#fff;border:1px solid var(--blue-light);color:#000;}

.submit-button-blue{background:var(--blue03);margin:15px;padding:10px 15px;color:#fff;border:1px solid var(--blue03); border-radius: 3px;cursor:pointer;transition: all 0.2s;}
.submit-button-blue:hover{background:#fff;border:1px solid var(--blue03);color:var(--blue03);}

.submit-button-blue-reverse{background:#fff;margin:15px;padding:10px 15px;color:var(--blue03);border:1px solid var(--blue03); border-radius: 3px;cursor:pointer;transition: all 0.2s;}
.submit-button-blue-reverse:hover{background:var(--blue03);border:1px solid var(--blue03);color:#fff;}

.submit-button-main-color{background:var(--main-color);margin:15px;padding:10px 15px;color:#fff;border:1px solid var(--main-color); border-radius: 3px;cursor:pointer;transition: all 0.2s;}
.submit-button-main-color:hover{background:#fff;border:1px solid var(--main-color);color:var(--main-color);}

.dash{color:#e1e1e1;}
.fw-normal{font-weight: normal;}
.boldy600{font-weight:600;}
.main-color{color:var(--main-color);}
.main-color02{color:var(--main-color02);}
.green{color:var(--green);}
.blue01{color:var(--blue01);}
.italic{font-style: italic;}
.ghost{color:#999;}
.ghost2{color:#777;}
.red{color:var(--red);}
.bbb{color:#bbb; transition: all 0.3s;}
.bbb:hover{color: var(--main-color);}
.soft-dark{color:#333;}
.red{color:var(--red);}

.hidden{display:none;}

.fl{float:left;}
.fr{float:right;}

.fs10 {font-size:10px;} .fs12 {font-size:12px;} .fs14 {font-size:14px;} .fs16 {font-size:16px;} .fs18 {font-size:18px;} .fs20 {font-size:20px;} .fs22 {font-size:22px;}
.fs24 {font-size:24px;}
/* custom links ends */

/* Sizes */

.w5{width:5%;} 	 .w10{width:10%;} .w15{width:15%;} .w17{width:17%;} .w20{width:20%;}
.w25{width:25%;} .w30{width:30%;} .w35{width:35%;} .w40{width:40%;}
.w45{width:45%;} .w50{width:50%;} .w55{width:55%;} .w60{width:60%;}
.w65{width:65%;} .w70{width:70%;} .w75{width:75%;} .w80{width:80%;}
.w85{width:85%;} .w90{width:90%;} .w95{width:95%;} .w100{width:100%;}

.wl5{width:5%;} 	 .wl10{width:10%;} .wl15{width:15%;} .wl20{width:20%;}
.wl25{width:25%;} .wl30{width:30%;} .wl35{width:35%;} .wl40{width:40%;}
.wl45{width:45%;} .wl50{width:50%;} .wl55{width:55%;} .wl60{width:60%;}
.wl65{width:65%;} .wl70{width:70%;} .wl75{width:75%;} .wl80{width:80%;}
.wl85{width:85%;} .wl90{width:90%;} .wl95{width:95%;} .wl100{width:100%;}

/*.ws90{width:90%;} .ws95{width:95%;} .ws100{width:100%;}*/

.m5{margin:5px;} .ml5{margin-left:5px;} .mt5{margin-top:5px;} .mb5{margin-bottom:5px;} .mr5{margin-right:5px;}
.m10{margin:10px;} .ml10{margin-left:10px;} .mt10{margin-top:10px;} .mb10{margin-bottom:10px;} .mr10{margin-right:10px;}
.m20{margin:20px;} .ml20{margin-left:20px;} .mt20{margin-top:20px;} .mb20{margin-bottom:20px;} .mr20{margin-right:20px;}
.m30{margin:30px;} .ml30{margin-left:30px;} .mt30{margin-top:30px;} .mb30{margin-bottom:30px;} .mr30{margin-right:30px;}

.m5percent{margin:5%;} .ml5percent{margin-left:5%;} .mt5percent{margin-top:5%;} .mb5percent{margin-bottom:5%;} .mr5percent{margin-right:5%;}
.m10percent{margin:10%;} .ml10percent{margin-left:10%;} .mt10percent{margin-top:10%;} .mb10percent{margin-bottom:10%;} .mr10percent{margin-right:10%;}
.m20percent{margin:20%;} .ml20percent{margin-left:20%;} .mt20percent{margin-top:20%} .mb20percent{margin-bottom:20%;} .mr20percent{margin-right:20%;}
.m30percent{margin:30%;} .ml30percent{margin-left:30%;} .mt30percent{margin-top:30%;} .mb30percent{margin-bottom:30%;} .mr30percent{margin-right:30%;}

.p10{padding:10px;} .pl10{padding-left:10px;} .pt10{padding-top:10px;} .pb10{padding-bottom:10px;} .pr10{padding-right:10px;}
.p20{padding:20px;} .pl20{padding-left:20px;} .pt20{padding-top:20px;} .pb20{padding-bottom:20px;} .pr20{padding-right:20px;}


@media only screen and (max-width:720px) {

  /* Sizes Responsive*/

  .w5{width:25%;}  .w10{width:30%;} .w15{width:35%;} .w20{width:40%;}
  .w25{width:45%;} .w30{width:50%;} .w35{width:55%;} .w40{width:60%;}
  .w45{width:65%;} .w50{width:70%;} .w55{width:75%;} .w60{width:80%;}
  .w65{width:80%;} .w70{width:80%;}

}