/* screen height  */
.extra-small-screen {height:300px;}
.small-screen {height:400px;}
.one-second-screen {height:600px ! important;}
.one-third-screen {height:700px;}
.one-fourth-screen {height:800px;}
.one-fifth-screen {height:900px;}
.one-sixth-screen {height:887px;}
.bg-black {background-color:#000;}
.bg-extra-dark-gray {background-color:#1c1c1c;}
.bg-medium-gray {background-color:#dbdbdb;}
.bg-extra-light-gray {background-color:#e0e0e0}
.bg-medium-light-gray {background-color:#ededed}
.bg-light-gray {background-color:#f7f7f7 !important;}
.bg-orange {background-color: #ff8c00 ! important;}
.bg-light-orange {background-color: #fffaf3 ! important;}
.bg-brown {background-color:#d2691e !important;}
.bg-dark-brown {background-color:#793f13 !important;}
.bg-yellow {background-color: #ffd801 !important;}
.padding-20px-lr {padding-left:20px ! important; 
padding-right:20px ! important;}
.text-black {color:#000 !important;}
.text-white {color:#FFF}
.text-extra-dark-gray {color:#232323 ! important;}
.text-dark-gray {color:#626262}
.text-extra-medium-gray {color:#757575}
.text-extra-light-gray {color:#b7b7b7}
.text-light-gray {color:#d6d5d5}
.text-very-light-gray {color:#ededed}
.text-orange {color: #ff8c00 !important;}
.text-brown {color:#d2691e !important;}
.text-dark-brown {color:#793f13 ! important;}
.text-yellow {color:#ffd801 !important;}
.width-50 {width:50%;}
.width-55 {width:55%;}
.width-60 {width:60%;}
.width-65 {width:65%;}
.width-70 {width:70%;}
.width-75 {width:75%;}
.width-80 {width:80%;}
.width-85 {width:85%;}
.width-90 {width:90%;}
.width-95 {width:95%;}
.width-100 {width:100%;}
.width-auto {width: auto}

/* text size */
.text-small {font-size:15px ! important; line-height:20px ! important;}
.text-medium {font-size:16px; line-height:23px}
.text-large {font-size:18px; line-height:26px}
.text-extra-large {font-size: 30px; line-height:40px}

.no-margin {margin:0 !important}
.no-margin-lr {margin-left: 0 !important; margin-right: 0 !important}
.no-margin-tb {margin-top: 0 !important; margin-bottom: 0 !important}
.no-margin-top {margin-top:0 !important}
.no-margin-bottom {margin-bottom:0 !important}
.margin-10px-bottom {margin-bottom:10px ! important;}
.margin-20px-bottom {margin-bottom:20px ! important;}
.margin-30px-bottom {margin-bottom:30px ! important;}
.margin-40px-bottom {margin-bottom:40px ! important;}
.margin-50px-bottom {margin-bottom:50px ! important;}
/* padding top and bottom */
.no-padding {padding:0 !important}
.no-padding-lr {padding-left: 0 !important; padding-right: 0 !important}
.no-padding-tb {padding-top: 0 !important; padding-bottom: 0 !important}
.no-padding-top {padding-top:0 !important}
.no-padding-bottom {padding-bottom:0 !important}
.no-padding-left {padding-left:0 !important}
.no-padding-right {padding-right:0 !important}
.padding-5px-bottom {padding-bottom:5px !important;}
.padding-6px-bottom {padding-bottom:6px !important;}
.padding-5px-tb {padding-top:5px ! important; padding-bottom:5px ! important;}
.padding-10px-tb {padding-top:10px ! important; padding-bottom:10px ! important;}
.padding-15px-tb {padding-top:15px ! important; padding-bottom:15px ! important;}
.padding-20px-tb {padding-top:20px ! important; padding-bottom:20px ! important;}
.padding-25px-tb {padding-top:25px ! important; padding-bottom:25px ! important;}
.padding-30px-tb {padding-top:30px ! important; padding-bottom:30px ! important;}
.padding-35px-tb {padding-top:35px ! important; padding-bottom:35px ! important;}
.padding-40px-tb {padding-top:40px ! important; padding-bottom:40px ! important;}

/* text link hover color */
a.text-link-white, a.text-link-white i {color:#ffffff}
a.text-link-white:hover, a.text-link-white:hover i, a.text-link-white:focus, a.text-link-white:focus i {color:#000; text-decoration:underline ! important;}

/* font weight */
.font-weight-300 {font-weight:300 ! important;}
.font-weight-400 {font-weight:400 ! important;}
.font-weight-500 {font-weight:500 ! important;}
.font-weight-600 {font-weight:600 ! important;}
.font-weight-700 {font-weight:700 ! important;}

.width-70 {width:70% ! important;}
.width-75 {width:75% ! important;}
.width-80 {width:80% ! important;}
.width-85 {width:85% ! important;}
.width-90 {width:90% ! important;}
.width-95 {width:95% ! important;}
.width-100 {width:100% ! important;}
.width-auto {width: auto}

.margin-lr-auto {margin-left:auto !important; margin-right:auto !important}
.margin-auto {margin: 0 auto !important;}
.center-col {float:none !important; margin-left:auto !important; margin-right:auto !important;}

.box-shadow-dark { box-shadow: 0 0 4px rgba(0,0,0,.4) ! important;}
.box-shadow-large { box-shadow: 0 0 12px rgba(0,0,0,.65) ! important;}

/* opacity */
.opacity-very-light {position: absolute; height: 100%; width: 100%; opacity: 0.2; top:0; left: 0;}
.opacity-light {position: absolute; height: 100%; width: 100%; opacity: 0.3; top:0; left: 0;}
.opacity-extra-medium {position: absolute; height: 100%; width: 100%; opacity: 0.5; top:0; left: 0;}
.opacity-medium {position: absolute; height: 100%; width: 100%; opacity: 0.75; top:0; left: 0;}
.opacity-full {position: absolute; height: 100%; width: 100%; opacity: 0.8; top:0; left: 0;}
.opacity-full-dark {position: absolute; height: 100%; width: 100%; opacity: 0.9; top:0; left: 0;}

/* text link hover color */
a.text-link-white, a.text-link-white i {color:#ffffff ! important;}
a.text-link-white:hover, a.text-link-white:hover i, a.text-link-white:focus, a.text-link-white:focus i {color:#ff8c00 ! important;}
a.text-link-black, a.text-link-black i {color:#000000 ! important;}
a.text-link-black:hover, a.text-link-black:hover i, a.text-link-black:focus, a.text-link-black:focus i {color:#ff8c00 ! important;}
a.text-link-wb, a.text-link-wb i {color:#ffffff ! important;}
a.text-link-wb:hover, a.text-link-wb:hover i, a.text-link-wb:focus, a.text-link-wb:focus i {color:#000000 ! important; text-decoration:underline ! important;}