@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');

/* Genral 
========================================================================================*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 	margin: 0; 	padding: 0; border: 0;	font-size: 100%; font: inherit;	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block;}
ol, ul { list-style: none; }
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table {	border-collapse: collapse; border-spacing: 0;}

.clearfix:after {  content: "."; display:block; font-size:0; line-height:0; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }		
* html .clearfix { height:1%; }
.clearfix { display:block; }

.alingLeft { float:left}
.alingRight { float:right}

:focus { outline:none;}
img { vertical-align:top; border:0; max-width:100% }
p { padding:0 0 25px 0}

section:after, .innerWrapper:after {  content: "."; display:block; font-size:0; line-height:0; height:0; clear:both; visibility:hidden; }
section, .innerWrapper { display:inline-block; }		
* html section, * html .innerWrapper { height:1%; }
section, .innerWrapper { display:block; }
strong{ font-weight:bold;}

/* 
Color code:
blue : #037cd5
yellow : #FDD921
 */

/* END Genral 
========================================================================================*/

/* Font  
========================================================================================*/


#logo, nav, .questions, .questionsBox, .yourScore, .quizResult, .privewHome, .listof, .newslaterheader .button { font-family: 'Open Sans', sans-serif;}
h1, h2, h3, h4, h6 {font-family: 'Roboto', sans-serif; font-weight:300; }

body { -webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; font:18px/36px 'Roboto', Helvetica, Arial, sans-serif; color:#3d3d3d; font-weight: 300; font-style: normal; }
footer li a, aside a, .socialIcon li:first-child { font-family: 'Open Sans', Helvetica, Arial, sans-serif; }


@font-face {
    font-family: 'entyporegular';
    src: url('../fonts/Entypo-webfont.eot');
    src: url('../fonts/Entypo-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Entypo-webfont.woff') format('woff'),
         url('../fonts/Entypo-webfont.ttf') format('truetype'),
         url('../fonts/Entypo-webfont.svg#entyporegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 84px;
    line-height: 1.4;
    color: white;
}



/* End Font  
========================================================================================*/

/* Branding  
========================================================================================*/
body { background:#FFF; padding-top: 88px; }


/* Links AND Button   
========================================================================================*/
a:focus{ outline:none;}
a { color:#0088cc; }
hr { border-style: dashed; }

.button, .greyButton { background-color: #EEB2B9; color: white; display:inline-block; border: solid 1px #EEB2B9; vertical-align:middle; line-height: 27px; text-align: center; padding:5px 20px; text-decoration:none; border-radius:0px; text-transform:capitalize; }
.button:hover, .greyButton:hover { background: #310202; color: white; text-shadow: none; text-decoration: none; border-color: #310202; }
.button:focus, .greyButton:focus { text-decoration: none; }

.greyButton:before{ text-transform:none; font-family:entyporegular; font-size:30px; display:inline-block; vertical-align: middle;  }
.iconDownlod:before{ content:'x'; }
.iconEdit:before{ content:'&'; }
.iconView:before{ content:'M'; }
.tc { text-align:center;}

/* Links AND Button   
========================================================================================*/


.listof { list-style:none; margin:0 0 30px; font-weight:600;  font-size:12px; }
.listof li { padding:0 5px 5px 0; float:left; width:32%;}
.listof li a{ display:block; border:solid 1px #0473ab; background:#0088cc; box-shadow:inset 0 0px 30px #026ea4;  padding:8px 20px; color:#FFF; text-decoration:none; border-radius:5px;}
.listof li a:hover{ background-color:#05acff;}

.privew{ margin-bottom:20px; margin-top: 3%;}
.privewHome{ border:solid 1px #e1e1e1; background:#FFF; box-shadow:inset 0 0 50px rgba(000,000,000,0.1); padding:30px 40px 30px; border-radius:5px; font-size:14px; line-height:22px; font-weight:300; text-align:center}
.privewHome h2{ text-align:center; font-size:30px; font-weight:300; line-height:40px; margin:0 0 25px; text-transform:capitalize}
.privewHome h2 span{ display:block;}
.privewHome p{ padding:0 0 8px 0; margin:0}
.privewHome .button { font-size:18px; line-height:46px; padding:0 50px; font-weight:500;}
.privewHome p.big{ color:#0088cc; font-size:22px; padding:10px 0 25px 0; text-transform:uppercase}

.questionsBox{ background-color:white; display:block; border:solid 1px #e3e3e3; padding:10px 20px 0px; box-shadow:inset 0 0 30px rgba(000,000,000,0.1), inset 0 0 4px rgba(255,255,255,1); border-radius:3px; margin:0 10px;}
.questions{ background:#992e31; color:#FFF; font-size:22px; padding:8px 30px; font-weight:300; margin:0 -30px 10px; position:relative;}
/*.questions:before, .questions:after{ background:url(../img/icon.png) no-repeat left 0; display:block; position:absolute; top:100%; width:9px; height:7px; content:'.'; left:0; text-align:left; font-size:0}*/
.questions:after{ left:auto; right:0; background-position:-10px 0}
.answerList{ margin-bottom:15px;}
.answerList li{ padding:3px 0;}
.answerList li:first-child{ border-top-width:0}
.answerList label{ display:block; padding:6px; border-radius:6px; border:solid 1px #fff4f5; font-weight:400; cursor:pointer; font-family:Arial, sans-serif;background-color: #fff4f5; }
.answerList li:hover label{ border-color:#990707;  background:#990707;  color: white;}
.answerList li.selected label{ border-color:#b2d9ee;  background:#dcedf6;}


.questionsRow { background:#e6dede; margin:0 -20px; padding:10px 20px; border-radius:0 0 3px 3px; min-height: 50px; }
.questionsRow span{ float:right; display:inline-block; line-height:30px; border:solid 1px #310202; padding:0 10px; background:#FFF; color:#310202; }

.quizResult { margin:0 0 10px 0; border-bottom:solid 1px #e3e3e3; padding-bottom:6px; font-size: 15px; line-height: 28px; }
.quizResult li{ margin:0 0 6px; border:solid 1px #e3e3e3;  padding:5px 20px; border-radius:5px; position:relative;}
.quizResult h2 { font-size: 22px; margin:0; font-weight:300;}
.quizResult li.resultAnsIswrong {background-color:#fff2f2; border-color:#fae1e1;}
.quizResult li.resultAnsIscorrect{background-color:#f6ffee; border-color:#e2f8cf;}
.quizResult .ansStute{ position:absolute; left:0; top:-1px; bottom:-1px;  color:#FFF;  font-weight:500; padding:0; width:6px;  border-radius:5px 0 0 5px;}
.quizResult li.resultAnsIswrong .ansStute{background:#aa0101;}
.quizResult li.resultAnsIscorrect .ansStute{background:#00a637;}

.quizScore{ background:#e8f7ff; border:solid 1px #d8eefa; padding:10px 20px; border-radius:5px;}
.quizScore a.button{ float:right;}
.yourScore{ font-size:18px; line-height:30px; color:#0e5e88;}

.postTopBanner { background: #f7f7f9; text-align:center; border: dashed 1px #ccc; border-width: 1px 0; padding: 20px 0 5px; margin-bottom: 30px; overflow:hidden; }
pre{ border:solid 1px #e3e3e3; padding:10px 20px; box-shadow:inset 0 0 20px rgba(000,000,000,0.1), inset 0 0 4px rgba(255,255,255,1); border-radius:3px; margin:0 0 30px ; white-space:pre-wrap}
pre span{ color:#8c8c8c;}
.tutotialsList li .postTopBanner{ margin-bottom:0; padding:0; border:0;}

.tutotialsList { margin-bottom:45px; }
.tutotialsList li { color:#575757; border-top:solid 1px #ebebeb; padding-top:30px; margin-bottom:30px }
.tutotialsList li:first-child { border:none; padding-top:0 }
.tutotorialImg { display:inline-block; border:solid 1px #cccccc; box-shadow:inset 0 0 27px rgba(000,000,000,0.1); text-align:center; /*padding-top:65px;*/ width:198px; min-height:150px; line-height: 150px; background:#FFF; float:left; margin:0 18px 0 0 }
.tutotorialImg img { vertical-align: middle; }
/*.tutotorialImg.imagesnone{ min-height:120px; }*/
.tutotialsList p { padding-bottom: 21px; }
.tutotialsList h3 { font-weight: 300; margin:0 0 15px 0; }
.tutotialsList h3 a { font-size:36px; color: #0088cc; text-decoration:none; line-height:42px; }
.tutotialsList h3 a:hover, .cssToolsList h3 a:hover { color:#077dad; }

.tutotialsList .greyButton { background-color: transparent; color:#333333; font-size:18px; border:solid 1px #333333; padding:12px 23px 12px 24px; line-height:24px; min-width: 180px; text-align: center; margin-right: 7px; margin-bottom: 10px; }
.tutotialsList .greyButton:hover { background-color: #333; color: #fff; }


.title { font-size: 18px; font-weight: 300; line-height: 24px; display:block; color:#474747; padding:12px 0 2px 0; }
.title a { color:#474747; text-decoration:none; }
.title a:hover { color:#077dad }

.pluginsContainer .title a { font-size: 15px; background-color: #eeeeee; color: #037cd5; display: inline-block; padding: 2px 12px 1px; border-radius: 3px; margin-bottom: 5px; }
.pluginsContainer .title a:hover { background: #dddddd; }

.cssToolsList { line-height: 24px; }
.cssToolsList li { float:left; width: 100%; margin-bottom: 30px; position: relative; }
.cssToolsList li .tutotorialImg { margin-top: 0;  }

.textShadow { margin-top:38px }

.quizList{ margin: 0 -1% 20px; }
.quizList li { background:#FFF; border:solid 1px #e3e3e3; box-shadow:inset 0 0 27px rgba(000,000,000,0.1); padding:15px 19px 15px 16px; border-radius:5px; width:31.333%; float:left;  margin-bottom:30px; text-align: center; margin: 0 1% 15px; }
.quizList li .greyButton { padding:0; display:block; text-align: center;  }
.quizList li h3 { color: #333; margin-bottom: 15px; border-bottom: solid 1px #ddd; padding-bottom: 10px;  }
.quizList li .button { padding: 6px 12px; font-size: 16px; line-height: 24px;  display: inline-block; white-space: nowrap; text-overflow: ellipsis; width: 100%; overflow: hidden }
.quizIocns { background:url(../img/tutorials/quiz-icons.png) no-repeat 0 0; display:inline-block; overflow:hidden; vertical-align:middle; margin-bottom: 8px; }
.iconHtml { background-position:0 0; width:67px; height:66px; }
.iconHtml5 { background-position:-71px 0; width:67px; height:66px; }
.iconCss { background-position:-139px 0; width:67px; height:66px;  }
.iconCss3 { background-position:0 -68px; width:67px; height:66px;  }
.iconJavascript { background-position:-139px -68px; width:67px; height:66px;  }
.iconJquery { background-position:-71px -68px; width:67px; height:66px;  }
.iconPhp { background-position:-71px -136px; width:67px; height:66px;  }
.iconXml { background-position:0px -136px; width:67px; height:66px;  }
.iconSql { background-position:-139px -136px; width:67px; height:66px }
.icon-bootstrap { background-position:0 -204px; width:67px; height:66px; }

#selectTemplate{ display:flex; flex-wrap: wrap; margin:0 0 15px}
#selectTemplate li{  width:33.3%; position: relative; overflow: hidden; margin: 0; padding: 5px;    }

#selectTemplate li > a{
   margin: 0px 0px;
   padding:0.8%; background:#FFF; border:solid 1px #E7E7E7; border-radius:10px; position:relative; overflow:hidden;
   display: block;
}


#selectTemplate li .templateMata{ background:rgba(000,000,000,0.5); display:block; position:absolute; left:5px; right:5px; bottom:5px; top:5px; padding:5px 10px; opacity:0;  text-align:center; border-radius:10px;}
#selectTemplate li:hover .templateMata {  padding-top:30%;  opacity:1;}
#selectTemplate li .templateMata a{ margin:0 2px; line-height:28px; padding:0 10px; font-size:0; }
#selectTemplate .greyButton { background: #5d6065; color: #FFF; border: 0; text-shadow: 0 1px 0px rgba(255,255,255,0.1); min-width: inherit; }
#selectTemplate .greyButton:hover { background-color: #037cd5; color: #FFF; }

.templatebanner{ background:url(../img/templates.jpg) no-repeat left -25px; height:318px; display:block; font-weight:300; text-transform:capitalize; border-radius:5px; background-size:cover }
.templatebannerContainer { width:60%; float:right; padding:45px 5% 0 0; text-align:center}
.templatebanner h2{ font-weight:300; font-size:30px; line-height:40px; text-transform:uppercase; text-shadow:1px 1px 0 rgba(255,255,255,0.6);}
.templatebanner p{ padding:0; margin:0}
.templatebanner strong { color:#0088cc;}

.showMobile { display: none!important; }

/* Ui Slider */
.range-slider { width: 100%; }
.range-slider input[type='range'] { display: inline-block; -webkit-appearance: none; height: 24px; vertical-align: middle }
.rangeSlider { width: 100%; -webkit-appearance: none; }
.rangeSlider::-webkit-slider-runnable-track {
	-webkit-appearance: none ;
	appearance: none ;
	border-radius: 5px;
	box-shadow: inset 1px 1px 1px rgba(000,000,000,0.10);
	background-color: #CCC;
	height: 8px;
	vertical-align:top;
	border: none;
	cursor: pointer;
}
.rangeSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	border-radius: 100%;
	background-color: #037cd5;
	box-shadow: inset 0 0 0 4px #CCC, inset 0 0 4px #CCC, inset 0 0 0 4px #CCC;
	height: 22px;
	width: 22px;
	vertical-align:middle;
	border: none;
	cursor: pointer;
	margin-top: -6px;
}
.rangeSlider::-webkit-slider-thumb:hover { 
	background: #fdd921;
}
.rangeSlider:active::-webkit-slider-thumb { 
	background: #fdd921; 
}
.rangeSlider::-moz-range-track{
	-moz-appearance: none ;
	border-radius: 5px;
	box-shadow: inset 1px 1px 1px rgba(000,000,000,0.10);
	background-color: #CCC;
	height: 8px;
	vertical-align:top;
	margin:0; padding:0;
	border: none;
	cursor: pointer; 
}
.rangeSlider::-moz-range-thumb {
	-moz-appearance: none ;
	border-radius: 100%;
	background-color: #037cd5;
	box-shadow: inset 0 0 0 4px #CCC, inset 0 0 4px #CCC, inset 0 0 0 4px #CCC;
	height: 22px;
	width: 22px;
	vertical-align:middle;
	border: none;
	cursor: pointer;
	margin-top: -6px;
}
.rangeSlider::-moz-range-thumb:hover { 
	background: #fdd921; 
}
.rangeSlider:active::-moz-range-thumb { 
	background: #fdd921; 
}
.rangeSlider::-ms-track {
	width: 100%;
	height: 8px;
	cursor: pointer;
	animate: 0.2s;
	background: transparent;
	border-color: transparent;
	border-width: 39px 0;
	color: transparent;
}
.rangeSlider::-ms-fill-lower {
	background: #CCC;
	border: 0px solid #000101;
	border-radius: 50px;
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; 
	height: 8px;
}
.rangeSlider::-ms-fill-upper {
	background: #CCC;
	border: 0px solid #000101;
	border-radius: 50px;
	box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d; 
	height: 8px;
}
.rangeSlider::-ms-thumb {
	box-shadow: inset 0 0 0 4px #CCC, inset 0 0 4px #CCC, inset 0 0 0 4px #CCC;
	border: 0px solid #000000;
	height: 22px;
	width: 22px;
	border-radius: 100%;
	background: #037cd5;
	cursor: pointer;
	margin-top: -2px;	
}
input::-moz-focus-inner, input::-moz-focus-outer { border: 0; }

.input-group input { width: 100%; display: block; }


/* transition
===============================================*/
#wrapper, #widecolumn, aside, nav li, a, .button, .templateMata, .greyButton, .backToTopLink {transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s;}

.toolOption{ list-style:none; margin-bottom:30px; display:block; border:solid 1px #e3e3e3; padding:10px 20px; box-shadow:inset 0 0 30px rgba(000,000,000,0.1), inset 0 0 4px rgba(255,255,255,1); border-radius:3px; text-shadow:1px 1px 0 #FFF; }
.toolOption > li { float:left; width:46%; padding:10px 0; margin: 0 2% 5px; min-height: 60px; }
/*.toolOption > li.range-slider { padding: 12px 0; }*/
.toolOption label { width:38%; display:inline-block; float:left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap }
.toolOption input[type="range"]{ width:160px; display:inline-block; vertical-align:middle; margin:0}

.toolOption li output { font-size: 16px; display: inline-block; float: right; background-color: #f2f2f2; color: #888; border: solid 1px #CCC; width: 56px; border-radius: 2px; text-align: center; line-height: 32px; }
#output{ font-size: 16px; line-height: 27px; border:solid 1px #e3e3e3; padding:10px 20px; box-shadow:inset 0 0 30px rgba(000,000,000,0.1), inset 0 0 4px rgba(255,255,255,1); border-radius:3px;text-shadow:0 1px 0 #FFF; } 

.previewArea {  }
.subprivew{ min-height:100px; border:solid 1px #CCC; padding:20px; text-align:center; text-shadow:1px 1px 0 #FFF; }
.subprivew.multipleColumns{ min-height:inherit}
.subprivew.transitions{ background:#FFF; border-radius:0;  }
.subprivew.transitions:hover{ background:#737373; border-width:8px; border-radius:50px;}

.subprivew.transform{ margin:0 30%; -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;}


.css3dtransformtool {
      width: 200px;
      height: 200px;
      position: relative;
      margin: 0 auto 40px;
      border: 1px solid #CCC;
      -webkit-perspective: 1000px;
         -moz-perspective: 1000px;
           -o-perspective: 1000px;
              perspective: 1000px;
    }

    .css3dtransformtool .transform {
      width: 100%;
      height: 100%;
      position: absolute;
	  margin:0;
	  border:0;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
    }

    .css3dtransformtool .transform figure {
      display: block;
      position: absolute;
      width: 196px;
      height: 196px;
      border: 2px solid black;
      line-height: 196px;
      font-size: 120px;
      font-weight: bold;
      color: white;
      text-align: center;
	  padding:0; margin:0;
    }

     .css3dtransformtool .transform.panels-backface-invisible figure {
      -webkit-backface-visibility: hidden;
         -moz-backface-visibility: hidden;
           -o-backface-visibility: hidden;
              backface-visibility: hidden;
    }

     .css3dtransformtool .transform .front  { background: hsla(   0, 100%, 50%, 0.7 ); }
     .css3dtransformtool .transform .back   { background: hsla(  60, 100%, 50%, 0.7 ); }
     .css3dtransformtool .transform .right  { background: hsla( 120, 100%, 50%, 0.7 ); }
     .css3dtransformtool .transform .left   { background: hsla( 180, 100%, 50%, 0.7 ); }
     .css3dtransformtool .transform .top    { background: hsla( 240, 100%, 50%, 0.7 ); }
     .css3dtransformtool .transform .bottom { background: hsla( 300, 100%, 50%, 0.7 ); }

     .css3dtransformtool .transform .front  {
      -webkit-transform: translateZ( 100px );
         -moz-transform: translateZ( 100px );
           -o-transform: translateZ( 100px );
              transform: translateZ( 100px );
    }
     .css3dtransformtool .transform .back   {
      -webkit-transform: rotateX( -180deg ) translateZ( 100px );
         -moz-transform: rotateX( -180deg ) translateZ( 100px );
           -o-transform: rotateX( -180deg ) translateZ( 100px );
              transform: rotateX( -180deg ) translateZ( 100px );
    }
     .css3dtransformtool .transform .right {
      -webkit-transform: rotateY(   90deg ) translateZ( 100px );
         -moz-transform: rotateY(   90deg ) translateZ( 100px );
           -o-transform: rotateY(   90deg ) translateZ( 100px );
              transform: rotateY(   90deg ) translateZ( 100px );
    }
     .css3dtransformtool .transform .left {
      -webkit-transform: rotateY(  -90deg ) translateZ( 100px );
         -moz-transform: rotateY(  -90deg ) translateZ( 100px );
           -o-transform: rotateY(  -90deg ) translateZ( 100px );
              transform: rotateY(  -90deg ) translateZ( 100px );
    }
     .css3dtransformtool .transform .top {
      -webkit-transform: rotateX(   90deg ) translateZ( 100px );
         -moz-transform: rotateX(   90deg ) translateZ( 100px );
           -o-transform: rotateX(   90deg ) translateZ( 100px );
              transform: rotateX(   90deg ) translateZ( 100px );
    }
     .css3dtransformtool .transform .bottom {
      -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
         -moz-transform: rotateX(  -90deg ) translateZ( 100px );
           -o-transform: rotateX(  -90deg ) translateZ( 100px );
              transform: rotateX(  -90deg ) translateZ( 100px );
    }


.CssView li span{ color:#0000ff;}
.CssView li span:first-child, .CssView li span:last-child{ color:#000099;}

.tableData { width:100%; border-collapse:collapse;  color:#3d3d3d; }
.tableData td, .tableData th { border:solid 1px #e1e1e1 }
.tableData th { background:#f1f1f1; font-family:"Open Sans"; font-weight:normal; font-size:15px; color:#0088cd; text-align:left; padding:6px 8px 8px 9px  }
.tableData td { padding:8px 9px 10px 9px; vertical-align:top }

.odd { background:#f9f9f9 }

.browserIcons { background:url(../img/icon-sprite.png) no-repeat 0 0; display:inline-block; overflow:hidden; vertical-align:middle }
.iconMozila { background-position:0 0; width:26px; height:25px }
.iconGoogle { background-position:-28px 0; width:24px; height:25px }
.iconInternet { background-position:-54px 0; width:26px; height:25px }
.iconSafari { background-position:-106px 0; width:26px; height:25px }
.iconOpera { background-position:-82px 0; width:22px; height:25px }

.browserList { padding-bottom:20px;}
table .browserList{ padding-bottom:0}
.browserList li { list-style:none; float:left; margin-left:3px; }
.browserList li:first-child { margin-left:0 }

.headeradds{ background: #f7f7f9; overflow:hidden; border: dashed 1px #ccc; border-width: 1px 0; text-align:center; padding: 20px 0 5px; margin-bottom:10px; } 
.browserNotSupport .headeradds{ padding-top:20px;}
.headeradds.datacontent { text-align: left; padding: 30px; }

.rightAdd { width:160px; height:600px; background:#FFF; position:fixed; top:88px; margin-left:-160px; border:solid 0px #E7E7E7; border-top:5px solid #0088cc; border-bottom:5px solid #0088cc;  padding:0; overflow:hidden; }


.pluginsContainer { overflow:hidden; }
.jqueryPlugins .tutotorialImg { padding:5px; box-shadow:none }
.pluginMainImage { float:left; width:31%; display:inline-block; border:solid 1px #ebebeb; padding:5px; box-shadow:0 0 5px rgba(0,0,0,0.08); margin-right:15px; background:#FFF }
.pluginMainImage img { width:100% }
.pluginsDetail { padding:7px 0 0 0; overflow:hidden }
.pluginsDetail ul { margin:0 0 10px 25px; padding:0  }
.pluginsDetail ul li { list-style:disc; font-size:15px; }
.pluginsDetail h3{ font-weight:bold}
.pluginsDetail .greyButton { margin-bottom: 5px; }

.pluginsDetail ol { margin:0 0 10px 25px; padding:0  }
.pluginsDetail ol li { list-style:decimal; font-size:15px; }

.pluginsList li { width:30.5%; float:left; margin-left:1%; background:#eff0f2; padding:8px 1%; border-radius:7px;  }
.pluginsList li:first-child { margin-left:0 }
.pluginsList > li > a { text-decoration:none; color:#3d3d3d; text-align:center; display:block }
.pluginsList li figure { display:block; border:solid 1px #bdc3c7; background:#FFF; margin-bottom:7px; border-radius:7px; overflow:hidden; padding:7px }
.pluginsList li img { width:100%;  border-radius:7px; }
.pluginsList li span { display:block; margin-bottom:10px; line-height:32px }

.tag-lists { clear:both; padding-top:25px; }
.tag-lists a { font-size:15px; background-color: #eeeeee; color:#037cd5; display:inline-block; border-radius: 3px;  padding: 2px 12px 1px; margin: 0 5px 5px 0; }
.tag-lists a:hover { background: #dddddd; }

.postpager { padding-bottom:20px; display:block; }
.postpager a { background:#058fd4; border-radius:3px; font-size: 14px; line-height:18px; box-shadow:inset 0 0 15px rgba(0,0,0,0.15); border:none; color:#FFF; margin-right:3px; margin-bottom: 5px; text-align:center; padding:3px 8px 4px 8px; display:inline-block; text-decoration:none; vertical-align:middle }
.postpager a:hover { background:#0c9fe8 }
.postpager a.active{ background:#00a6f9 }

.pluginsDetail .greyButton, .tag-lists a { transition:all 0.4s ease; -moz-transition:all 0.4s ease; -webkit-transition:all 0.4s ease; -o-transition:all 0.4s ease; -ms-transition:all 0.4s ease }

section article { padding-bottom:20px;}

.asidebanner { display:block; text-align:center; margin-bottom:20px; }
.asidebanner img{ width:auto; max-width:100%;}
aside .asidebanner a{ padding:0; margin:0;}
aside .asidebanner a:before {  content: ""; position:absolute; margin:-2px 0 0 -10px;  display:none;}
.textpverflowd{ overflow:hidden; white-space:nowrap; border:solid 1px #CCC;height:inherit; min-height:inherit}


.newslatestform{ text-align:center; padding:10px 0}
.newslatestform .indicates-required{ display:none}
.newslatestform input[type="email"]{ background:#FFF; border:solid 1px #ccc; resize:none; color:#3d3d3d; font-size:12px; padding:0px 10px; height:28px; line-height:28px; width:90%; margin-bottom:10px;}

.listdata { padding:0 0 20px 20px}
.listdata li:before { content:"\f192"; position:absolute; margin:13px 0 0-20px; font:normal normal normal 10px/1 FontAwesome; color:#08C;}
.listdata li{ padding:0 0 0 25px;}

.snippetsList{ margin:0; padding:0 0 20px;}
.snippetsList li{ padding:0 0 3px 0; margin-bottom: 2px; }
.snippetsList a { font-size: 16px; font-weight: normal; line-height: 24px; display:block; padding:10px 21px; background:#f5f5f5; border:solid 1px #dddddd; border-radius: 3px; color:#333333; text-decoration:none; transition: all 0.2s; -moz-transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s;}
.snippetsList a:hover{ background-color:#0088cc; color:#FFF; border-color:#0088cc; }
.snippetsList a:before { content:"\f192"; position:absolute; margin:5px 0 0 -20px; font:normal normal normal 10px/1 FontAwesome; display: none; }

.headersearch{ float:left}

.itemsScope{ display:none;}
.button.newtag{ padding:0 5px; font-size: 12px; line-height: 16px;  min-width: auto; border: 0; }
.ultabledata .button.newtag{ padding:0 0 0 5px; background:none; color:#e64d26; font-size:0; min-width: auto; border: 0; }
.ultabledata .button.newtag:before{ font-size:18px;}
.ultabledata li p > strong{ display:inline-block; vertical-align:top} 
.ultabledata li p > strong { width:120px; padding-bottom:20px; float:left }
.ultabledata li { padding:0 0 0px 10px; clear:both; }
.ultabledata a{ text-decoration:none;}
.ultabledata p{ padding-bottom:0 }
.ultabledata span > a{ margin-left:5px;}
.ultabledata a.fa{ font-size:0}
.ultabledata a.fa:before{ font-size:18px;}

.flexboxTool { min-height:250px;}
.flexboxTool > div{ width:50px; height:50px; padding:10px; background:#037CD5; margin:5px; color:#FFF; text-shadow:0 0 0 rgba(000,000,000,.5);  }


/*minicolors*/
.minicolors { position: relative; }
.minicolors-swatch { position: absolute; vertical-align: middle; background: url(../img/color.png) -80px 0; border: solid 1px #ccc; cursor: text; padding: 0; margin: 0; display: inline-block; }
.minicolors-swatch-color { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.minicolors input[type=color] + .minicolors-swatch { width: 28px; position: static; cursor: pointer; }
/* Panel */
.minicolors-panel { position: absolute; width: 173px; height: 152px; background: white; border: solid 1px #CCC; box-shadow: 0 0 20px rgba(0, 0, 0, .2); z-index: 99999; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; display: none; }
.minicolors-panel.minicolors-visible { display: block; }
/* Panel positioning */
.minicolors-position-top .minicolors-panel { top: -154px; }
.minicolors-position-right .minicolors-panel { right: 0; }
.minicolors-position-bottom .minicolors-panel { top: auto; }
.minicolors-position-left .minicolors-panel { left: 0; }
.minicolors-with-opacity .minicolors-panel { width: 194px; }
.minicolors .minicolors-grid { position: absolute; top: 1px; left: 1px; width: 150px; height: 150px; background: url(../img/color.png) -120px 0; cursor: crosshair; }
.minicolors .minicolors-grid-inner { position: absolute; top: 0; left: 0; width: 150px; height: 150px; background: none; }
.minicolors-slider-saturation .minicolors-grid { background-position: -420px 0; }
.minicolors-slider-saturation .minicolors-grid-inner { background: url(../img/color.png) -270px 0; }
.minicolors-slider-brightness .minicolors-grid { background-position: -570px 0; }
.minicolors-slider-brightness .minicolors-grid-inner { background: black; }
.minicolors-slider-wheel .minicolors-grid { background-position: -720px 0; }
.minicolors-slider, .minicolors-opacity-slider { position: absolute; top: 1px; left: 152px; width: 20px; height: 150px; background: white url(../img/color.png) 0 0; cursor: row-resize; }
.minicolors-slider-saturation .minicolors-slider { background-position: -60px 0; }
.minicolors-slider-brightness .minicolors-slider { background-position: -20px 0; }
.minicolors-slider-wheel .minicolors-slider { background-position: -20px 0; }
.minicolors-opacity-slider { left: 173px; background-position: -40px 0; display: none; }
.minicolors-with-opacity .minicolors-opacity-slider { display: block; }
/* Pickers */
.minicolors-grid .minicolors-picker { position: absolute; top: 70px; left: 70px; width: 12px; height: 12px; border: solid 1px black; border-radius: 10px; margin-top: -6px; margin-left: -6px; background: none; }
.minicolors-grid .minicolors-picker > div { position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 8px; border: solid 2px white; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
.minicolors-picker { position: absolute; top: 0; left: 0; width: 18px; height: 2px; background: white; border: solid 1px black; margin-top: -2px; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
/* Inline controls */
.minicolors-inline { display: inline-block; }
.minicolors-inline .minicolors-input { display: none !important; }
.minicolors-inline .minicolors-panel { position: relative; top: auto; left: auto; box-shadow: none; z-index: auto; display: inline-block; }
/* Default theme */
.minicolors-theme-default .minicolors-swatch { top: 5px; left: 5px; width: 18px; height: 18px; }
.minicolors-theme-default.minicolors-position-right .minicolors-swatch { left: auto; right: 5px; }
.minicolors-theme-default.minicolors { width: auto; display: inline-block; }
.minicolors-theme-default .minicolors-input { height: 20px; width: auto; display: inline-block; padding-left: 26px; }
.minicolors-theme-default.minicolors-position-right .minicolors-input { padding-right: 26px; padding-left: inherit; }
/* Bootstrap theme */
.minicolors-theme-bootstrap .minicolors-swatch { top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 3px; }
.minicolors-theme-bootstrap.minicolors-position-right .minicolors-swatch { left: auto; right: 3px; }
.minicolors-theme-bootstrap .minicolors-input { padding-left: 44px; }
.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input { padding-right: 44px; padding-left: 12px; }

.maxadstop{ background: #f7f7f9; border: dashed 1px #ccc; border-width: 1px 0; text-align:center; overflow:hidden; padding: 20px 0; margin-bottom:30px; }
.maxadstop img{ height:auto !important}


.prettyprint { font-size: 16px; }
.prettyprint.linenums li { line-height: 24px; }

label { font-weight: inherit; }

.typesOfSnippets { display: block; margin-bottom: 15px; }
.typesOfSnippets li { display: block; float: left; margin-right: 25px; margin-bottom: 10px; }
.typesOfSnippets li .checkbox { margin-top: 0; margin-bottom: 0; position: relative; }
.typesOfSnippets li .checkbox input[type=checkbox] { display: none; }
.typesOfSnippets li .checkbox input[type=checkbox] + label { color: #808080; font-weight: 300;  padding-left: 39px; position: relative; text-align: center; }
.typesOfSnippets li .checkbox input[type=checkbox] + label:before { content: "\f00c"; display: inline-block; font: normal normal normal 0/24px FontAwesome; color: #aaaaaa; width: 24px; height: 24px; background-color: #dddddd; border-radius: 2px; position: absolute; top: 5px; left: 0; }
.typesOfSnippets li .checkbox input[type=checkbox] + label:hover, .typesOfSnippets li .checkbox input[type=checkbox]:checked + label { color: #666; }
.typesOfSnippets li .checkbox input[type=checkbox] + label:hover:before { background-color: #cccccc; font-size: 16px; }
.typesOfSnippets li .checkbox input[type=checkbox]:checked + label:before { background-color: #EEB2B9; color: #ffffff; font-size: 16px; }

.textAds { background-color: #f7f7f9; border: dashed 1px #ccc; border-width: 1px 0; padding: 20px 0; margin-bottom: 30px; overflow: hidden; }

/* Banner */
#banner { color: #ffffff; height: 650px;
/* ms ( IE 10.0+ ) */
background:-ms-linear-gradient(180deg, rgba(4,125,213,1) 0.00%, rgba(40,142,216,1) 50.00%, rgba(5,125,214,1) 99.75% );
/* WebKit (Chrome 10.0+, safari 5.1+ )*/
background:-webkit-linear-gradient(180deg, rgba(4,125,213,1) 0.00%, rgba(40,142,216,1) 50.00%, rgba(5,125,214,1) 99.75% );
/* Moz ( Moz 3.6+ )*/
background:-moz-linear-gradient(180deg, rgba(4,125,213,1) 0.00%, rgba(40,142,216,1) 50.00%, rgba(5,125,214,1) 99.75% );
/* Opera ( opera 11.6+ )*/
background:-o-linear-gradient(180deg, rgba(4,125,213,1) 0.00%, rgba(40,142,216,1) 50.00%, rgba(5,125,214,1) 99.75% );
/* W3C Markup */
background:linear-gradient(180deg, rgba(4,125,213,1) 0.00%, rgba(40,142,216,1) 50.00%, rgba(5,125,214,1) 99.75% );
}

/* Banner Slider */
#banner h1 { font-size: 60px; line-height: 66px; color: #ffffff; font-weight: 500; border-bottom: none; padding-bottom: 0; margin-bottom: 20px; }
#banner .btn.btn-lg { background-color: #ffffff; color: #037cd5; border-radius: 0; font-size: 24px; line-height: 32px; font-weight: 300; padding: 18px 15px; min-width: 380px; }
#banner .btn.btn-lg:hover { background-color: #fdd921; color: #000000; }

.anim-slider { background-color: transparent; height: 650px; text-align: center; letter-spacing: 0.75px; }
.anim-slider li p { text-shadow:  0 1px 3px rgba(0,0,0,0.25); }
.anim-slider li p.italiq { font-style: italic; }
.anim-slider li a { position: relative; }

.anim-slide h1#cssSliderTitle, .anim-slide h1#gradientTitle, .anim-slide h1#boxShadowTitle, .anim-slide h1#switchButtonTitle { width: 100%; top: 31.5%; }
.anim-slide #cssSliderText, .anim-slide #gradientText, .anim-slide #boxShadowText, .anim-slide #switchButtonText { width: 100%; padding: 0 18%; top: 44%; }
.anim-slide #gradientLink, .anim-slide #switchButtonLink { width: 100%; top: 61%; }
.anim-slide #cssSliderLink, .anim-slide #boxShadowLink { width: 100%; top: 54%; }

.anim-slide-this { z-index: 900!important; }
nav.anim-arrows>span { top: 50%; margin-top: -16px; z-index: 990; }
nav.anim-arrows>span.anim-arrows-prev:after { content: "\f053"; font: normal normal normal 32px/1 FontAwesome; }
nav.anim-arrows>span.anim-arrows-next:after { content: "\f054"; font: normal normal normal 32px/1 FontAwesome; }
nav.anim-arrows>span.anim-arrows-prev:after, nav.anim-arrows>span.anim-arrows-next:after { color: #ffffff !important; }
nav.anim-arrows>span.anim-arrows-prev, nav.anim-arrows>span.anim-arrows-next, .anim-slider:hover>nav.anim-arrows>span:hover { width: auto; height: auto; box-shadow: none; opacity: 1 }
.anim-dots { display: none; }

.custom-control-input:checked~.custom-control-label.pink::before {
    color: #fff;
    border-color: #7B1FA2;
}


@media(max-width:500px){
    h1 {
        font-family: 'Montserrat', sans-serif;
        font-size: 34px;
        line-height: 1;
    }

    .questions {
        font-size: 20px;
        line-height: 1.6;
    }

    .answerList li:hover label { border-color:#fff4f5;  background:#fff4f5;  color: initial;}

    .questionsBox {
        margin: 5%;
    }
}
@media(min-width:768px){
    h1 {
        font-family: 'Montserrat', sans-serif;
        font-size: 44px;
        line-height: 1;
    }

    .answerList li:hover label { border-color:#fff4f5;  background:#fff4f5;  color: initial;}
}

.answerSelected { border-color:#990707;  background:#990707;  color: white;}
.answerUnselected { border-color:#fff4f5;  background:#fff4f5;  color: initial;}