﻿
ul, li, ul li, table, lable, p, span, dl, dt, dd, table, tr, td {margin: 0px; padding: 0px;}
* {margin: 0px; padding: 0px;}
a:hover, a:focus {text-decoration: none !important;}
img {border: none;}
.mt5 {margin-top: 5px !important;}
.mt7 {margin-top: 7px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt220{margin-top: 220px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mb5 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.ml5 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml30 {margin-left: 30px !important;}
.ml40 {margin-left: 40px !important;}
.ml50 {margin-left: 50px !important;}
.ml60 {margin-left: 60px !important;}

body{overflow-x:hidden; font-family: 'Open Sans', sans-serif;}
.mb-23{margin-bottom:23px;}
.mb-50{margin-bottom:50px;}
.mt-0{margin-top:0 !important;}
.border-bottom0{border-bottom:0 !important;}
a:hover{text-decoration:none;}


h3{}
/*-- grid css --*/
.grid{background:#ccc;}
.grid .item {color:#fff; margin:0px;text-align: center; min-height: 75px; padding: 10px 0; font-size:20px;}
.grid .col-1{background:#ff2101;}
.grid .col-2{background:#81c901;}
.grid .col-3{background:#8e10e6;}
.grid .col-4{background:#e85d87;}
.grid .col-5{background:#315ce8;}
.grid .col-6{background:#df9801;}
.grid .col-7{background:#FF00FF;}
.grid .col-8{background:#808000;}
.grid .col-9{background:#008000;}
.grid .col-10{background:#00ffff;}
.grid .col-11{background:#ff4000;}


.grid-container1 {display: grid; grid-template-rows:200px 200px;}
.grid-container1 > .item {width:100px; }
.grid-container1 .col-1{}

.grid-container2 {display: grid; grid-template-columns:200px 200px;}
.grid-container2 .col-1{}

.grid-container3 {display: grid; grid-template-rows:100px 120px; grid-template-columns:100px 100px 100px; grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px;}

.grid-container4 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(2, 100px) 200px; grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }

.grid-container5 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(2, 100px) 1fr; grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }

.grid-container6 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }

.grid-container7 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:1fr 2fr 1fr; grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }

.grid-container8 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:50% 1fr 1fr; grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }

.grid-container9 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container9 .col-1{grid-row-start:2; grid-row-end:3;}

.grid-container10 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container10 .col-1{grid-row-start:2; grid-row-end:3; grid-column-start:2; grid-column-end:3;}

.grid-container11 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container11 .col-1{grid-row:2/3; grid-column:2/3;}

.grid-container12 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container12 .col-5{grid-row: 1/2; grid-column: 3/4;}

.grid-container13 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container13 .col-5{grid-area: 1/3;}

.grid-container14 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container14 .col-1{grid-row: 2/2; grid-column: 2/4;}

.grid-container15 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container15 .col-5{grid-row: 1/3; grid-column: 3/4;}

.grid-container16 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container16 .col-4{grid-area:1/3/3/3}

.grid-container17 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container17 .col-2{grid-row: 2/2; grid-column: 2 / -1;}

.grid-container18 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container18 .col-1{grid-row: 2/2; grid-column: 2 / span 2;}

.grid-container19 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container19 .col-2{grid-row: 3/3; grid-column: 2 / -1;}
.grid-container19 .col-5{grid-area: 1/3/3/3;}

.grid-container20 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(4, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container20 .col-1{/*grid-area: 1/1/1/5;*/ grid-column: 1 / -1;}
.grid-container20 .col-2{}
.grid-container20 .col-3{}
.grid-container20 .col-4{}
.grid-container20 .col-5{grid-area: 2/4/6/5; height:600px;}
.grid-container20 .col-6{grid-area: 3/1/6/4;}
.grid-container20 .col-7{grid-area: 7/1/6/5;}


.grid-container21 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(4, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container21{
grid-template-areas:
    "head head head head"
    "box1 box2 box3 side"
    "main main main side"
    "foot foot foot foot" ;}
.grid-container21 .col-1{grid-area:head;}
.grid-container21 .col-2{grid-area:box1;}
.grid-container21 .col-3{grid-area:box2;}
.grid-container21 .col-4{grid-area:box3;}
.grid-container21 .col-5{grid-area:side; height:500px;}
.grid-container21 .col-6{grid-area:main;}
.grid-container21 .col-7{grid-area:foot;}

.grid-container22 {display: grid; grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(4, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container22{
grid-template-areas:
    ". head head ."
    "box1 box2 box3 side"
    "main main main side"
    "foot foot foot foot" ;}
.grid-container22 .col-1{grid-area:head;}
.grid-container22 .col-2{grid-area:box1;}
.grid-container22 .col-3{grid-area:box2;}
.grid-container22 .col-4{grid-area:box3;}
.grid-container22 .col-5{grid-area:side; height:500px;}
.grid-container22 .col-6{grid-area:main;}
.grid-container22 .col-7{grid-area:foot;}

.grid-container23 {display: grid; grid-template-rows:repeat(1, 200px); grid-template-columns:repeat(3, 1fr); grid-auto-rows:90px; grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container23 .col-1{}

.grid-container24 {display: grid; align-items: center; grid-template-rows:repeat(2, 150px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container24 .col-1{}


.grid-container25 {display: grid; align-items: center; justify-items: center; grid-template-rows:repeat(2, 150px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container25 .col-1{}

.grid-container26 {display: grid; align-items: center; justify-items: center; grid-template-rows:repeat(2, 150px); grid-template-columns:repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container26 .col-5{align-self: stretch; justify-self: stretch;}

.grid-container27 {display: grid; justify-content: center;  grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 100px); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container27 .col-5{}

.grid-container28 {display: grid; height:400px; align-content: center;  grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(3, 100px); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container28 .col-5{}


.grid-container29 {display: grid; align-content: center;  grid-template-rows:repeat(2, 100px); grid-template-columns:max-content 1fr 1fr max-content; grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container29 .col-5{}

.grid-container30 {display: grid; align-content: center;  grid-template-rows:repeat(2, min-content); grid-template-columns:min-content 1fr 1fr min-content; grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container30 .col-8{width:100px;}

.grid-container31 {display: grid; align-content: center;  grid-template-rows:repeat(2, minmax(150px, min-content)); grid-template-columns:min-content 1fr 1fr min-content; grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container31 .col-8{width:100px;}

.grid-container32 {display: grid; align-content: center;  grid-template-rows:repeat(2, 100px); grid-template-columns:minmax(200px, 50%) repeat(3, 1fr); grid-row-gap:5px; grid-column-gap:5px; grid-gap: 20px; }
.grid-container32 .col-8{}

.grid-container33 {display: grid; align-content: center;  grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(auto-fill, 100px); grid-row-gap:5px; grid-column-gap:5px; grid-gap:0px; }
.grid-container33 .col-8{}

.grid-container34 {display: grid; align-content: center;  grid-template-rows:repeat(2, 100px); grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows:100px;}
.grid-container34 .col-8{}
/*lession 95*/
