/**Basic Styling**/
*{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

html{
	font-size:21px;
	line-height:1.5;
}

body{
    color: #2c3e50;
    font-family: Segoe UI, Open Sans, Roboto, sans-serif, Arial;
    font-size: 1rem;
    font-weight: normal;
}
a{
    text-decoration: none;
    color: #2c3e50;
}
a:hover{
    color:#d0245e;
    transition: ease-in .2s color;
    -webkit-transition: ease-in .2s color;
    -moz-transition: ease-in .2s color;
    -o-transition: ease-in .2s color;
    -ms-transition: ease-in .2s color;
}
/**Text Selection**/
 ::selection {
    background-color: #f1f1f1;
    color: #000;
 }
::-moz-selection {
   background-color: #352e7e;
   color: #fff;
}
::-o-selection {
   background-color: #352e7e;
   color: #fff;
}
::-ms-selection {
   background-color: #352e7e;
   color: #fff;
}
::-webkit-selection {
   background-color: #352e7e;
   color: #fff;
}
/**Scroll Bar**/
/*
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
    background: #a1a1a1;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
	background: #a1a1a1;
}
*/
.container{
    width: 100%;
    max-width: 1137px;
    margin: 0 auto;
}

/**First**/
.about{
    position: relative;
    padding: 25px;
    font-size: 1.278rem;
    background: #2d2d2d;
    text-align: center;
    height: 300px;
}
.tessellactation-container{
    /* FIXME: figure out how to position the canvas beneath the intro1 and header/menu elements */
}
#tessellactation{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.main-h1{
    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
    font-size: 4.762rem;
    color: #2d2d2d;  /* #2c3e50; */
    margin-top: 20px;
}
.about .main-h1 { line-height: 1.1; }
.brl{
    position: relative;
    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
    color: #d0245e; /*d91a5d; */

    text-shadow: 0px 0px 4px #282828,
    -1px -1px 0 #282828,
    1px -1px 0 #282828,
    -1px 1px 0 #282828,
    1px 1px 0 #282828;
}
.dash{
    position: relative;
    top: -8px;
    left: -5px;
    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
    color: #888;

    text-shadow: 0px 0px 4px #111,
    -1px -1px 0 #111,
    1px -1px 0 #111,
    -1px 1px 0 #111,
    1px 1px 0 #111;
}
.cad{
    position: relative;
    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
    color: #fff;

    text-shadow: 0px 0px 4px #111,
    -1px -1px 0 #111,
    1px -1px 0 #111,
    -1px 1px 0 #111,
    1px 1px 0 #111;
}
.byline{
    position: relative;
    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
    font-size: 1.524rem;
    color: #fff;
    top: -16px;

    text-shadow: 0px 0px 8px #111,
    -1px -1px 0 #111,
    1px -1px 0 #111,
    -1px 1px 0 #111,
    1px 1px 0 #111;
}
.pad{
    padding-top: 20px;
    height: 180px;
    width: 180px;
    color:#999;
}
.feature-card { display: block; position: relative; }
.feature-card .pad { display: block; margin: auto; }
.feature-card:focus-visible { outline: 3px solid #d0245e; outline-offset: 4px; }
.feature-card:hover,
.feature-card:focus-visible { z-index: 1; }
.feature-card .feature-copy {
    margin: 0;
    padding: 12px 10px;
    background: #fff;
}
.feature-link {
    display: block;
    margin-top: 10px;
    color: #b51f52;
    font-size: .85rem;
    text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
    .feature-card .feature-copy {
        position: absolute;
        top: 100%;
        left: 10px;
        right: 10px;
        padding: 16px;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 12px 18px #0002;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .feature-card:hover .feature-copy,
    .feature-card:focus-visible .feature-copy { opacity: 1; visibility: visible; pointer-events: auto; }
    .feature-card.is-dismissed .feature-copy { opacity: 0; visibility: hidden; pointer-events: none; }
}
.main-intro{
    font-family: Segoe UI, Open Sans, Arial, sans-serif;
    font-size: 1.67rem;
}
.wrapper-main{
    position: relative;
    width: min(100%, 900px);
    margin: 0px auto;
    padding-top: 20px;
}
.icon-table{
    position: relative;
    z-index: 1;
    max-width:1200px;
    margin: 10px auto;
    border-spacing: 10px 0px;
}

.icon-table:after{
	content:"";
	display:block;
	clear:both;
}

.intro1{
    box-sizing:border-box;
    padding:0px 10px;
    text-align: center;
    width:33%;
    min-width:300px;
    float:left;
    margin:auto;
    margin-top:-70px;
}
.intro-topic{
    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
    font-size:2rem;
    font-weight: lighter;
}
.intro-main{
    font-weight: lighter;
    margin: 5px;
    font-size:1rem;
    color:#333;
}
.what-r{
    margin-top: 20px;
    background: #000;
/*     background: #f64747; */
    color: #fff;
    padding: 40px 90px 40px 90px;
    text-align: center;
    font-size: 1.33rem;
}
.what-p{
    font-weight: lighter;
    font-size:1.11rem;
    margin: 15px;
}
.articles{
    text-align: center;
    padding: 70px 50px 70px 70px;
}
.article-table{
    border-spacing: 20px 20px;
    margin: 10px auto;
}
.article-table img{
    height: 200px;
    width: 200px;
    cursor: pointer;
    border-radius: 250px;
    -webkit-border-radius: 250px;
    -moz-border-radius: 250px;
    -o-border-radius: 250px;
    -ms-border-radius: 250px;
}
.why-us{
    background: url("img/intro-background.gif");
    padding: 60px;
}
.double{
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    -o-columns: 2;
    -ms-columns: 2;
}
.double li{
	margin-bottom:30px;
}
/**Last**/
.last{
    padding: 20px 120px 80px 120px;
    background: #fff;
    text-align: center;
}
.whole-con{
    width: 100%;
    margin: 10px auto;
    margin-top: 20px;
    border-spacing: 10px 10px;
}
.con1{
    vertical-align: top;
    width: 50%;
}
.con2{
    vertical-align: top;
    width: 50%;
}
.message{
    width: 90%;
    outline-color: #d0245e;
/*    outline-color: #f64747;*/
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 20px;
    font-family: Open Sans, Arial, sans-serif;
    font-size: 1.22rem;
    max-width: 90%;
    min-width: 90%;
    height: 100px;
    resize: none;
    height: 180px;
    border: none;
    border: 1px solid #999;
}
.inputs{
    border: 1px solid #999;
    width: 100%;
    outline-color: #d0245e;
/*    outline-color: #f64747; */
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 20px;
    font-family: Open Sans, Arial, sans-serif;
    font-size: 1.22rem;
    max-width: 90%;
    min-width: 90%;
    margin: 0px 0px 10px 0px;
}
.submits{
    border: 2px solid #d0245e;
/*#f64747; */
    width: 100%;
    background: #d0245e;
/*    background: #f64747; */
    color: #fff;
    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
    outline-color: #d0245e;
/*    outline-color: #f64747; */
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 15px;
    font-size: 1.22rem;
    width: 93%;
    margin: 10px auto;
    margin-top: 0px;
}
.submits:hover{
    background: #fff;
    color: #d0245e;
/*    color: #f64747; */
    transition: ease-in-out .3s background;
    -webkit-transition: ease-in-out .3s background;
    -moz-transition: ease-in-out .3s background;
    -o-transition: ease-in-out .3s background;
    -ms-transition: ease-in-out .3s background;
}
.social{
    width: auto;
    background: #d0245e;
    color: #fff;
    text-align: center;
    padding: 10px;
}
.links{
    margin-top: 30px;
}
.links li{
    display: inline;
    margin: 10px;
}
.links li img{
    height: 50px;
    width: auto;
}
.footer{
    background: #3a3a3a;
    color: #fff;
    padding: 70px 200px 70px 200px;
    text-align: center;
}
/**Other**/
.nots-opts1{
    border: 2px solid #d0245e;
/*#f64747; */
    background: #d0245e;
/*    background: #f64747; */
    color: #fff;
    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
    outline-color: #d0245e;
/*    outline-color: #f64747; */
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 5px;
    font-size: 0.88rem;
    margin: 0px 0px 20px 0px;
    cursor: pointer;
    display:block;
    width:200px;
    height:35px;
    line-height:35px;
    margin:auto;
    margin-top:20px;
    text-align:center;
}
.nots-opts1:hover{
    background: #fff;
    color: #d0245e;
/*    color: #f64747; */
    transition: ease-in-out .3s background;
    -webkit-transition: ease-in-out .3s background;
    -moz-transition: ease-in-out .3s background;
    -o-transition: ease-in-out .3s background;
    -ms-transition: ease-in-out .3s background;
}
.nots-opts2{
    border: 2px solid #d0245e;
/* #f64747; */
    background: #f64747;
    color: #fff;
    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
    outline-color: #d0245e;
/*    outline-color: #f64747; */
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 5px;
    font-size: 0.78rem;
    margin: 0px 0px 20px 0px;
    cursor: pointer;
}
.nots-opts2:hover{
    background: #fff;
    color: #d0245e;
/*    color: #f64747; */
    transition: ease-in-out .3s background;
    -webkit-transition: ease-in-out .3s background;
    -moz-transition: ease-in-out .3s background;
    -o-transition: ease-in-out .3s background;
    -ms-transition: ease-in-out .3s background;
}
.nots-opts3{
    border: 2px solid #d0245e;
/*#f64747;*/
    background: #d0245e;
/*    background: #f64747; */
    color: #fff;
    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
    outline-color: #d0245e;
/*    outline-color: #f64747; */
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 5px;
    font-size: 0.78rem;
    margin: 0px 0px 20px 0px;
    cursor: pointer;
}
.nots-opts3:hover{
    background: #fff;
    color: #d0245e;
/*    color: #f64747; */
    transition: ease-in-out .3s background;
    -webkit-transition: ease-in-out .3s background;
    -moz-transition: ease-in-out .3s background;
    -o-transition: ease-in-out .3s background;
    -ms-transition: ease-in-out .3s background;
}
.nots-opts4{
    border: 2px solid #d0245e;
/* #f64747; */
    background: #d0245e;
/*    background: #f64747; */
    color: #fff;
    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
    outline-color: #d0245e;
/*    outline-color: #f64747; */
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 5px;
    font-size: 0.78rem;
    margin: 0px 0px 20px 0px;
    cursor: pointer;
}
.nots-opts4:hover{
    background: #fff;
    color: #d0245e;
/*    color: #f64747; */
    transition: ease-in-out .3s background;
    -webkit-transition: ease-in-out .3s background;
    -moz-transition: ease-in-out .3s background;
    -o-transition: ease-in-out .3s background;
    -ms-transition: ease-in-out .3s background;
}

            #dialogoverflow{
                display: none;
                position: fixed;
                top: 0;
                right: 0;
                width: 100%;
                z-index: 10;
                background: url("img/bg.png");
            }
            #dialogbox{
                opacity:1;
                display: none;
                position: fixed;
                background: #fff;
                color: #444;
                border: 1px solid #1a1a1a;
                box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -webkit-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -moz-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -o-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                -o-border-radius: 3px;
                -ms-border-radius: 3px;
                width: 750px;
                z-index: 10;
            }
            #dialogbox > div > #dialogboxhead{
                text-align: center;
                font-weight: normal;
                font-size: 1.39rem;
                font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
                padding: 10px;
                margin-bottom: 0px;
                border-bottom: 1px solid #666;
            }
            #dialogbox > div > #dialogboxbody{
                font-weight: normal;
                padding: 10px;
                margin: 0px 0px 0px 0px;
                padding: 20px 20px 20px 20px;
                font-size: 90%;
                height: 300px;
                overflow-y: scroll;
            }
            #dialogbox > div > #dialogboxfoot{
                padding: 10px;
                font-size: 90%;
                border-top: 1px solid #666;
            }
            #dialogoverflow2{
                display: none;
                position: fixed;
                top: 0;
                right: 0;
                width: 100%;
                z-index: 10;
                background: url("img/bg.png");
            }
            #dialogbox2{
                opacity:1;
                display: none;
                position: fixed;
                background: #fff;
                color: #444;
                border: 1px solid #1a1a1a;
                box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -webkit-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -moz-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -o-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                -o-border-radius: 3px;
                -ms-border-radius: 3px;
                width: 750px;
                z-index: 10;
            }
            #dialogbox2 > div > #dialogboxhead2{
                text-align: center;
                font-weight: normal;
                font-size: 25px;
                font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
                padding: 10px;
                margin-bottom: 0px;
                border-bottom: 1px solid #666;
            }
            #dialogbox2 > div > #dialogboxbody2{
                font-weight: normal;
                padding: 10px;
                margin: 0px 0px 0px 0px;
                padding: 20px 20px 20px 20px;
                font-size: 90%;
                height: 300px;
                overflow-y: scroll;
            }
            #dialogbox2 > div > #dialogboxfoot2{
                padding: 10px;
                font-size: 90%;
                border-top: 1px solid #666;
            }
            #dialogoverflow3{
                display: none;
                position: fixed;
                top: 0;
                right: 0;
                width: 100%;
                z-index: 10;
                background: url("img/bg.png");
            }
            #dialogbox3{
                opacity:1;
                display: none;
                position: fixed;
                background: #fff;
                color: #444;
                border: 1px solid #1a1a1a;
                box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -webkit-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -moz-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -o-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                -o-border-radius: 3px;
                -ms-border-radius: 3px;
                width: 750px;
                z-index: 10;
            }
            #dialogbox3 > div > #dialogboxhead3{
                text-align: center;
                font-weight: normal;
                font-size: 1.39rem;
                font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
                padding: 10px;
                margin-bottom: 0px;
                border-bottom: 1px solid #666;
            }
            #dialogbox3 > div > #dialogboxbody3{
                font-weight: normal;
                padding: 10px;
                margin: 0px 0px 0px 0px;
                padding: 20px 20px 20px 20px;
                font-size: 90%;
                height: 300px;
                overflow-y: scroll;
            }
            #dialogbox3 > div > #dialogboxfoot3{
                padding: 10px;
                font-size: 90%;
                border-top: 1px solid #666;
            }
            #dialogoverflow4{
                display: none;
                position: fixed;
                top: 0;
                right: 0;
                width: 100%;
                z-index: 10;
                background: url("img/bg.png");
            }
            #dialogbox4{
                opacity:1;
                display: none;
                position: fixed;
                background: #fff;
                color: #444;
                border: 1px solid #1a1a1a;
                box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -webkit-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -moz-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -o-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                -o-border-radius: 3px;
                -ms-border-radius: 3px;
                width: 750px;
                z-index: 10;
            }
            #dialogbox4 > div > #dialogboxhead4{
                text-align: center;
                font-weight: normal;
                font-size: 1.39rem;
                font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
                padding: 10px;
                margin-bottom: 0px;
                border-bottom: 1px solid #666;
            }
            #dialogbox4 > div > #dialogboxbody4{
                font-weight: normal;
                padding: 10px;
                margin: 0px 0px 0px 0px;
                padding: 20px 20px 20px 20px;
                font-size: 90%;
                height: 300px;
                overflow-y: scroll;
            }
            #dialogbox4 > div > #dialogboxfoot4{
                padding: 10px;
                font-size: 90%;
                border-top: 1px solid #666;
            }
            #dialogoverflow5{
                display: none;
                position: fixed;
                top: 0;
                right: 0;
                width: 100%;
                z-index: 10;
                background: url("img/bg.png");
            }
            #dialogbox5{
                opacity:1;
                display: none;
                position: fixed;
                background: #fff;
                color: #444;
                border: 1px solid #1a1a1a;
                box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -webkit-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -moz-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                -o-box-shadow: rgba(0, 0, 0, .8) 0px 0px 20px 0px;
                border-radius: 3px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                -o-border-radius: 3px;
                -ms-border-radius: 3px;
                width: 550px;
                z-index: 10;
            }
            #dialogbox5 > div > #dialogboxhead5{
                text-align: center;
                font-weight: normal;
                font-size: 1.39rem;
                font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
                padding: 10px;
                margin-bottom: 0px;
                border-bottom: 1px solid #666;
            }
            #dialogbox5 > div > #dialogboxbody5{
                font-weight: normal;
                padding: 10px;
                margin: 0px 0px 0px 0px;
                padding: 20px 20px 20px 20px;
                font-size: 90%;
                height: 150px;
                overflow-y: scroll;
            }
            #dialogbox5 > div > #dialogboxfoot5{
                padding: 10px;
                font-size: 90%;
                border-top: 1px solid #666;
            }
#dialogbox,
#dialogbox2,
#dialogbox3,
#dialogbox4,
#dialogbox5 {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  transform: translateX(-50%);
}

	    @media screen and (max-width: 500px){
		    .what-r{
			    padding:40px 40px 40px 40px;
			    text-align:left;
		    }

	    }
           @media screen and (max-width: 700px) and (min-width: 100px){
                .wrapper-main { padding-top: 40px; }
                html{
                    font-size: 18px;
                }
                .about{
                    padding: 10px;
                    background: #2d2d2d;
/*                    background: url("img/intro-background.gif"); */
                    text-align: center;
                    height: 250px;
                }
                .tessellactation-container{
                    display: none;
                }
                .main-h1{
                    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
                    font-size: 2.85rem;
                    color: #2c3e50;
                    margin-top: 20px;
                }
                .brl{
                    position: relative;
                    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
                    color: #d0245e;
                    margin-top: 20px;
                }
                .dash{
                    position: relative;
                    top: -8px;
                    left: -5px;
                    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
                    color: #888;
                    margin-top: 20px;
                }
                .cad{
                    position: relative;
                    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
                    color: #fff;
                    margin-top: 20px;
                }
                .byline{
                    position: relative;
                    font-family: Intro, Segoe UI, Open Sans, Arial, sans-serif;
                    color: #fff;
                    top: -6px;
		    font-size:1.11rem;
                }
                .main-intro{
                }
                .pad{
                    width: 100px;
                    height: 100px;
                    margin-top: 0px;
                }
                .who-r{
                    margin-top: 450px;
                    padding: 20px 20px 20px 20px;
                }
                .articles{
                    display: none;
                }
                .why-us{
                    padding: 10px 10px 10px 10px;
                }
                .last{
                    display: none;
                }
                .links li img{
                    width: 30px;
                    height: auto;
                }
                .footer{
                    padding: 20px 20px 20px 20px;
                }
            }

/*Mail subsription*/
.submit-mail
{
  border: 2px solid #fff;
  color: #d0245e;
  background-color: #fff;
  border-radius: 5px;
  padding: 5px;
  font-size: 0.88rem;
  cursor: pointer;
  display:block;
  width:200px;
  line-height:35px;
  margin:auto;
  margin-top:10px;
  margin-bottom: 20px;
  text-align:center;
}
.submit-mail:hover
{
  background-color: #d0245e;
  color: #fff;
}

/* Tablet */
@media only screen and (max-width: 945px) {
  .intro1 {
    float: none;
    width: 60%;
    margin-top: 0;
  }
  ul.double { columns: 1; }
}