﻿html,body,form {margin:0;}
.mainwrapper {position:relative;}
.loggedin {position:relative; top:54px !important;}
    .loggedin .nivoSlider {position:relative;}
.loginGroup {width: 80px; display: inline-block;}
.loginGroup a {color: rgb(2,139,255);}

/*Navigation*/
.TopContainer {position:fixed; z-index:100; top:0; left:0; width:100%; height:90px; background-color:RGBA(1,1,1,0.8); -webkit-box-shadow:0px 5px 30px 0px rgba(0,0,0,0.6); -moz-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.6); box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.6); -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s;}
.LogoContainer {position: relative; top: 50%; transform: translateY(-50%);}
.MobiIcon, .MobileMenu {display:none; -webkit-transition:200ms ease; -moz-transition:200ms ease; -o-transition:200ms ease; transition:200ms ease;}
.MenuContainer {height:100%; z-index:100;}

.TopContainer.floatingNav {height:80px; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s;}
.floatingNav .sf-with-ul {line-height:80px; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s;}
.floatingNav .nav > li > a {line-height:60px !important; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s;}
.floatingNav #dnn_LOGO1_imgLogo {width:70%; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; position:relative; top:10px; margin:auto;}
.floatingNav #Mmenu .gomenu > ul > li > a.menuitem {padding: 5px 15px;}

.MenuWrapper {height:100%}
/*.Mmenu {position: relative; top: 50%; transform: translateY(-50%);}*/
.nav a {color:#ffffff !important;}
.nav > li.hover > ul {z-index:9999;}
.nav > li:hover > a {background-color:#0073cc !important; color:#ffffff !important;}
.nav > li ul {white-space:nowrap; margin:0px;}
.nav li li a {background-color:RGBA(250,250,250,0.8) !important; color:#000000 !important; border-bottom:1px solid #000 !important;}
.nav li li a:hover {background-color:#2f9f0d !important; color:#ffffff !important;}

#Mmenu {display:inline-block; float:right;}



/* Go Menu */
#Mmenu .gomenu .menuslide {display:none; overflow:hidden; position:absolute; float:left;}
#Mmenu .gomenu > ul {height:100%; display:block; margin:0px; padding:0px;}
#Mmenu .gomenu > ul > li {float:left; list-style:none; position:relative;}
#Mmenu .gomenu > ul > li > .menuslide > ul {margin:0px;}
#Mmenu .gomenu > ul > li > a {padding: 10px 15px; color: #ffffff; font: normal 16px/1.5em "open sans",Tahoma; font-weight: 300; text-decoration: none; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; line-height:70px; position:relative; text-transform:uppercase; display:block;}
#Mmenu .gomenu > ul > li:hover > a, #Mmenu .gomenu > ul > li.current {background-color:#0073cc !important; color:#ffffff !important;}

#Mmenu .gomenu li li {list-style:none;}
#Mmenu .gomenu li li a {background-color:RGBA(250,250,250,0.8) !important; color:#000000 !important; border-bottom:1px solid #000 !important; padding: 10px 15px; font: normal 16px/1.5em "open sans",Tahoma; font-weight: 300; text-decoration: none; -webkit-transition: all 0.8s ease 0s; -moz-transition: all 0.8s ease 0s; -o-transition: all 0.8s ease 0s; transition: all 0.8s ease 0s; line-height:30px; position:relative; text-transform:uppercase; display:block; white-space:nowrap; text-align:left; float:left;}
#Mmenu .gomenu li li a:hover, #Mmenu .gomenu li li.subcurrent a {background-color:#2f9f0d !important; color:#ffffff !important;}

/*Banner*/
.bannerPane {width: 100%; height:100vh; background-color: #fff; position:relative; top: 0px; left: 0; overflow:hidden; z-index:0;}
.nivoSlider {position:absolute !important; bottom:0px !important; background:transparent !important;}
.nivo-slice > img {height:100% !important;}
.Theme_02_Light .nivo-caption a {border:none !important;}
.nivo-caption {text-align:center; left: 0px; text-align: center; background: RGBA(1,1,1,0.8) !important; -webkit-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.6); -moz-box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.6); box-shadow: 0px 5px 30px 0px rgba(0,0,0,0.6);}
.nivo-caption h1 {display:inline-block; font-size: 75px; line-height: 85px; padding:60px 0px 0px; letter-spacing: -1px; color: #fff; -webkit-font-smoothing:antialiased; text-shadow: 2px 2px 3px #333333; width:75%; text-transform:uppercase; font-family:Varela Round;}
.BannerLinkCon {position:relative; bottom:-20px; width:218px; height:100px; display:block; margin:0 auto;}
.nivo-directionNav {position:absolute; bottom:50px; right:0px; width:110px; z-index:100;}
.nivo-prevNav {position:absolute; left:20px !important; top:50% !important;}
.nivo-nextNav {position:absolute; right:20px !important; top:50% !important;}

.contentPane {margin-top:0px !important; margin-bottom:0px !important; padding-top:20px !important;}

/*Loader*/
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #2f9f0d;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
.contentpage #loader {top:25%;}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #fa8009;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #0073cc;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

body, table, .HotPres, td, .Normal, .NormalDisabled, .NormalDeleted { font-family: 'Open Sans', Arial; font-size: 14px; color: #121214; }
a { color: #0073cc; cursor: pointer; text-decoration: none; outline: none; font-weight: 700; }
a:link { }
a:hover { }
a:visited { }
hr { }

.footercontainer {background-color:#ffffff; display:inline-block; margin: 30px 0px 10px;}
.FootText, .copyright {color:#ffffff;}
.FootLink {text-decoration:none; font-weight:normal !important;}

/* TEXT */
h1 { font-size: 40px; text-decoration: none; color: #121214; font-weight: bold; padding: 0px; margin-top: 0px !important; font-family:'hind';}
h2 { font-size: 20px; text-decoration: none; color: #121214; font-weight: bold; padding: 0px; margin-top: 0px !important; font-family:'hind';}
h3 { font-size: 14px; font-family:'hind';}
h4 { font-size: 16px !important; text-decoration: none; color: #121214; font-weight: bold; padding: 0px !important; margin-top: 0px !important; font-family:'hind';}
h5 { font-size: 12px; font-family:'hind';}

/* Custom Styles */
.cs1 { }
.cs2 { }
.cs3 { }
.cs4 { }
.cs5 { }

.clear {clear:both;}

/*VideoContainer*/
.videocontainer {position:relative; overflow:hidden; height:500px; margin-top:20px;}
.VideoTexture {background:URL(/Portals/0/Skins/Dotcode/Images/grid.png) repeat; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1;}
.VideoOverlay {position:absolute; top:25%; left:0px; text-align:center; width:100%; z-index:2;}
.videocontainer h2 {font-size: 50px; line-height: 80px; letter-spacing: -1px; display: block; color: #fff; -webkit-font-smoothing:antialiased;}

/*MainButtons*/
.LinkButton {display: inline-block; padding: 8px; margin: 0px 0px 0px 0px; border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; -webkit-border-radius: 2px;}
.LinkButton a {background-color: #0073cc;
    color: #fff;
    border-radius: 2px;
    padding: 13px 17px;
    text-decoration: none;
    box-shadow: 0px 1px 0px rgba(255,255,255,0.25) inset, 0px 1px 3px rgba(0,0,0,0.2);
    text-transform: uppercase;
    font-family: 'Open Sans';
    letter-spacing: 2px;
    font-size: 12px;
    display: block;
    transition: border-color 0.2s linear, background-color 0.2s linear;
    -moz-transition: border-color 0.2s linear, background-color 0.2s linear;
    -o-transition: border-color 0.2s linear, background-color 0.2s linear;
    -webkit-transition: border-color 0.2s linear, background-color 0.2s linear;}
.ButtonColor2 {background-color:#fa8009 !important;}
.ButtonColor3 {background-color:#2f9f0d !important;}

/*Content*/
.contentpage.mainwrapper {height:500px;}
.contentpage > .bannerPaneContent {position:relative;}
.contentpage > .bannerPaneContent {height:420px; overflow:hidden !important;}

.contentpage > .bannerPaneContent .nivo-caption h1 {font-size:38px; line-height:40px; padding: 30px 0px 18px;}
.contentpage > .bannerPaneContent .BannerLinkCon {display:none;}

.contentpage > .bannerPaneContent .nivo-directionNav {display:none !important;}
.contentpage > .bannerPaneContent .nivo-caption {opacity:0.8 !important;}

.contentcontainer {position:relative; z-index:20; background-color:#ffffff;}
.Theme_02_Light.slider-wrapper {width:100% !important; height:100% !important; padding:0px !important;}

.contentcontainer > .container > .col-sm-4 {margin-top:20px;}
.contentcontainer > .container > .col-sm-4:first-child {padding-left:0px;}
.contentcontainer > .container > .col-sm-4:last-child {padding-right:0px;}

.contentcontainer > .container > .col-sm-4 .front {background-size:64% !important;}
.contentcontainer > .container > .col-sm-4 .front > h2 {display: block; position: relative; top: 82%; color: #fff; font-size: 21px; font-weight:normal;}

.contentcontainer > .container > .col-sm-4:first-child .front {background:URL(/Portals/0/Skins/Dotcode/Images/WebsiteDesignManagement.gif) no-repeat center 10px #22221f;}
.contentcontainer > .container > .col-sm-4:nth-of-type(2) .front {background:URL(/Portals/0/Skins/Dotcode/Images/SearchEngineOptimization.gif) no-repeat center 10px #22221f;}
.contentcontainer > .container > .col-sm-4:last-child .front {background:URL(/Portals/0/Skins/Dotcode/Images/OngoingCustomerSupport.gif) no-repeat center 10px #22221f;}
.contentcontainer > .container:nth-of-type(2) > .col-sm-4:first-child .front {background:URL(/Portals/0/Skins/Dotcode/Images/ContentManagementSystem.gif) no-repeat center 10px #22221f; background-size:50%;}
.contentcontainer > .container:nth-of-type(2) > .col-sm-4:nth-of-type(2) .front {background:URL(/Portals/0/Skins/Dotcode/Images/WebsiteHostingServices.gif) no-repeat center 10px #22221f; background-size:50%;}
.contentcontainer > .container:nth-of-type(2) > .col-sm-4:last-child .front {background:URL(/Portals/0/Skins/Dotcode/Images/ResponsiveWebsitePackages.gif) no-repeat center 10px #22221f; background-size:50%;}

.contentcontainer > .container > .col-sm-4:first-child .back {background-color:#fa8009;}
.contentcontainer > .container > .col-sm-4:nth-of-type(2) .back {background-color:#0073cc;}
.contentcontainer > .container > .col-sm-4:last-child .back {background-color:#2f9f0d;}

.ContentBottom {position:relative; margin-top:20px; background-color:#1f1e1b;}
    .ContentBottom > .VideoWrapper {position:absolute; z-index:10; top:0px; left:0px; height:259px; overflow:hidden; }
    .ContentBottom > .container {position:relative; z-index:20;}
    .ContentBottom > .container .footercontainer {background-color:transparent; padding:20px 0px; margin:0px}
    .ContentBottom > .container .footercontainer * {color:#ffffff}
.contentcontainer div.footer-copyright {margin-top:0px !important;}

div.pricing-table div.most-popular {
  border-color: #0088cc;
}
div.pricing-table div.most-popular h3 {
  background-color: #0074ad;
  background-image: -moz-linear-gradient(top, #0088cc, #005580);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#005580));
  background-image: -webkit-linear-gradient(top, #0088cc, #005580);
  background-image: -o-linear-gradient(top, #0088cc, #005580);
  background-image: linear-gradient(to bottom, #0088cc, #005580);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff005580', GradientType=0);
}

/* Pricing Tables */
div.pricing-table {
	margin: 25px 0 0 -15px;
	padding-left: 0;
	text-align: center;
}

body.boxed div.pricing-table {
	margin-left: -31px;
}

div.pricing-table div.most-popular {
	-moz-box-shadow: 11px 0 10px -10px rgba(0, 0, 0, 0.1), -11px 0 10px -10px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 11px 0 10px -10px rgba(0, 0, 0, 0.1), -11px 0 10px -10px rgba(0, 0, 0, 0.1);
	border: 3px solid #CCC;
	box-shadow: 11px 0 10px -10px rgba(0, 0, 0, 0.1), -11px 0 10px -10px rgba(0, 0, 0, 0.1);
	padding: 30px 20px;
	top: -10px;
	z-index: 2;
}

div.pricing-table div.most-popular h3 {
	background-color: #666;
	color: #FFF;
	padding-top: 30px;
	text-shadow: 0 1px #555;
}

div.pricing-table div.plan {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background: #FFF;
	border: 1px solid #ddd;
	border-radius: 5px;
	color: #333;
	margin-bottom: 35px;
	margin-right: -31px;
	padding: 20px;
	position: relative;
	text-shadow: 0 1px rgba(255,255,255,.8);
}

body.boxed div.pricing-table div.plan {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}

div.pricing-table a.btn {
	margin-top: 5px;
}

div.pricing-table ul {
	list-style: none;
	margin: 20px 0 0 0;
	padding: 0;
}

div.pricing-table h3 {
	-moz-border-radius: 2px 2px 0 0;
	-webkit-border-radius: 2px 2px 0 0;
	background-color: #eee;
	border-radius: 2px 2px 0 0;
	font-size: 20px;
	font-weight: normal;
	margin: -20px -20px 50px -20px;
	padding: 20px;
}

body.boxed div.pricing-table h3 {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
}

div.pricing-table h3 span {
	-moz-border-radius: 100px;
	-moz-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	-webkit-border-radius: 100px;
	-webkit-box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	background: #FFF;
	border: 5px solid #FFF;
	border-radius: 100px;
	box-shadow: 0 5px 20px #ddd inset, 0 3px 0 #999 inset;
	color: #777;
	display: block;
	font: bold 25px/100px Georgia, Serif;
	height: 100px;
	margin: 20px auto -65px;
	width: 100px;
}

div.pricing-table li {
	border-top: 1px solid #ddd;
	padding: 10px 0;
}

div.plan-ribbon-wrapper {
	height: 88px;
	overflow: hidden;
	position: absolute;
	right: -5px;
	top: -5px;
	width: 85px;
}

div.plan-ribbon {
	-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	-webkit-transform: rotate(45deg);
	background-color: #BFDC7A;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
	background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
	background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
	background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
	background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
	box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
	color: #333;
	font-size: 14px;
	left: -5px;
	padding: 7px 0;
	position: relative;
	text-align: center;
	text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
	top: 15px;
	transform: rotate(45deg);
	width: 120px;
}

div.plan-ribbon:before {
	left: 0;
}

div.plan-ribbon:before,
div.plan-ribbon:after {
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	bottom: -3px;
	content: "";
	position: absolute;
}

div.plan-ribbon:after {
	right: 0;
}


/*Responsive Styles*/
@media only screen and (min-width:1200px) {
    
}

@media only screen and (min-width:960px) {
    .nivo-caption h1 {font-size:58px; line-height:65px;}
}

@media only screen and (min-width:960px) and (max-width:1199px) {
    .TopContainer {height:68px !important;}
    .LogoContainer, .LogoContainer > a, .LogoContainer > .LogoWrapper {height:100%; display:block;}
    .LogoContainer img, .floatingNav #dnn_LOGO1_imgLogo {width:90%; position:relative; top:50%; transform:translateY(-50%); display:block; margin:0; float:left;}
    .nav > li > a {line-height:48px !important;}
    .fa {display:none;}
    .MobileMenu {min-width:380px !important;}
    .MenuContainer, .MenuWrapper {padding:0px !important;}
    .bannerPane {height:372px !important; top:0px !important; position:relative !important;}
    .BannerLinkCon {display:none;}
    .contentcontainer {top:0px !important; position:relative !important;}
    .MainLinks div {background:none !important;}
    .MainLinks H1 {font-size:15px !important; line-height:18px;}
        .MainLinks H1 > span {display:block;}
    .nivo-caption {padding:0px 0px 0px 0px !important}
        .nivo-caption h1 {line-height:42px !important; width:75%; font-size:30px !important; padding:15px 0px 5px !important;}
    .BannerServicesLink {display:none !important;}
    .HomeContentDiv {float:inherit !important; width:90% !important; margin:0 auto; display:block;}
    .h1, h1 {font-size:25px !important;}
    .h2, h2 {font-size:18px !important;}
    .contentcontainer {padding-top:0px;}
    .contentPane {margin-bottom:0px;}
    .videocontainer h2 {font-size: 25px; line-height: 26px;}
    .videocontainer {height:180px;}
    .VideoOverlay {top: 50%; transform: translateY(-50%);}
    .contentcontainer > .container > .col-sm-4 {padding-left:0px; padding-right:0px;}
    .back {font-size:13px !important; padding:10px !important;}
    .flip-container, .front, .back {height:170px !important; padding:0px 5px; box-sizing:border-box;}
    .contentcontainer > .container > .col-sm-4 .front {background-size:52% !important;}
    .contentcontainer > .container > .col-sm-4 .front > h2 {font-size:14px !important;}
    .FootText, .copyright {font-size:11px !important;}

    /*Content Pages*/
    .bannerPaneContent {height:300px !important;}
    .contentpage #loader {width:80px; height:80px; top:170px !important;}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .TopContainer {height:68px !important;}
    .LogoContainer, .LogoContainer > a, .LogoContainer > .LogoWrapper {height:100%; display:block;}
    .LogoContainer img, .floatingNav #dnn_LOGO1_imgLogo {width:90%; position:relative; top:50%; transform:translateY(-50%); display:block; margin:0; float:left;}
    .nav > li > a {line-height:48px !important;}
    .fa {display:none;}
    .MobileMenu {min-width:380px !important;}
    .MenuContainer, .MenuWrapper {padding:0px !important;}
    .bannerPane {height:252px !important; top:0px !important; position:relative !important;}
    .BannerLinkCon {display:none;}
    .contentcontainer {top:0px !important; position:relative !important;}
    .MainLinks div {background:none !important;}
    .MainLinks H1 {font-size:15px !important; line-height:18px;}
        .MainLinks H1 > span {display:block;}
    .nivo-caption {padding:0px 0px 0px 0px !important}
        .nivo-caption h1 {line-height:26px !important; width:68%; font-size:23px !important; padding:15px 0px 5px !important;}
    .BannerServicesLink {display:none !important;}
    .HomeContentDiv {float:inherit !important; width:90% !important; margin:0 auto; display:block;}
    .h1, h1 {font-size:25px !important;}
    .h2, h2 {font-size:18px !important;}
    .contentcontainer {padding-top:0px;}
    .contentPane {margin-bottom:0px;}
    .videocontainer h2 {font-size: 25px; line-height: 26px;}
    .videocontainer {height:180px;}
    .VideoOverlay {top: 50%; transform: translateY(-50%);}
    .contentcontainer > .container > .col-sm-4 {padding-left:0px; padding-right:0px;}
    .back {font-size:13px !important; padding:10px !important;}
    .flip-container, .front, .back {height:170px !important; padding:0px 5px; box-sizing:border-box;}
    .contentcontainer > .container > .col-sm-4 .front {background-size:52% !important;}
    .contentcontainer > .container > .col-sm-4 .front > h2 {font-size:14px !important;}
    .FootText, .copyright {font-size:11px !important;}

    /*Content Pages*/
    .bannerPaneContent {height:260px !important;}
    .contentpage #loader {width:60px; height:60px; top:170px !important;}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .TopContainer {height:46px !important;}
    .LogoContainer, .LogoContainer > a, .LogoContainer > .LogoWrapper {height:100%; display:block;}
    .LogoContainer img, .floatingNav #dnn_LOGO1_imgLogo {width:40%; position:relative; top:50%; transform:translateY(-50%); display:block; margin:0; float:left;}
    .MobiIcon {background:URL(/Portals/0/Skins/Dotcode/Images/MobiMenuLink.png); width:26px; height:23px; display: block !important; float: right; top: -35px; position: relative; margin-right: 5px; cursor: pointer;}
    .fa {display:none;}
    .MobileMenu {min-width:380px !important;}
    .MenuContainer, .MenuWrapper {padding:0px !important;}

    #Mmenu .gomenu .dropdown {background-color:RGBA(0,0,0,0.5);}

    .bannerPane {height:200px !important; top:0px !important; position:relative !important;}
    .BannerLinkCon {display:none;}
    .contentcontainer {top:0px !important; position:relative !important;}
    .MainLinks div {background:none !important;}
    .MainLinks H1 {font-size:15px !important; line-height:18px;}
        .MainLinks H1 > span {display:block;}
    .nivo-caption {padding:0px 0px 0px 0px !important}
        .nivo-caption h1 {line-height:26px !important; width:78%; font-size:18px !important; padding:15px 0px 5px !important;}
    .BannerServicesLink {display:none !important;}
    .nivo-directionNav {bottom: 25px; right: -17px; width: 85px;}
    .Theme_02_Light .nivo-directionNav a {width:20px !important; height:16px !important;}
    .Theme_02_Light a.nivo-prevNav {background-position: -22% 60% !important;}
    .Theme_02_Light a.nivo-nextNav {background-position: 121% 60% !important;}
    .HomeContentDiv {float:inherit !important; width:90% !important; margin:0 auto; display:block;}
    .h1, h1 {font-size:30px !important;}
    .h2, h2 {font-size:13px !important;}
    .contentcontainer {padding-top:0px;}
    .contentPane {margin-bottom:0px;}
    .videocontainer h2 {font-size: 25px; line-height: 26px;}
    .videocontainer {height:180px;}
    .VideoOverlay {top: 50%; transform: translateY(-50%);}
    .contentcontainer > .container > .col-sm-4 {padding-left:0px; padding-right:0px;}
    .back {font-size:14px !important; padding:10px !important;}
    .flip-container, .front, .back {height:170px !important;}
    .contentcontainer > .container > .col-sm-4 .front {background-size:30% !important;}
    .contentcontainer > .container > .col-sm-4 .front > h2 {font-size:14px !important;}
    #dnn_dnn_FooterRightInner {padding-top:20px;}
    .FootText, .copyright {font-size:11px !important;}

    /*Content Pages*/
    .bannerPaneContent {height:165px !important;}
}

@media only screen and (max-width: 479px) {
    .TopContainer {height:46px !important;}
    .LogoContainer, .LogoContainer > a, .LogoContainer > .LogoWrapper {height:100%; display:block;}
    .LogoContainer img, .floatingNav #dnn_LOGO1_imgLogo {width:60%; position:relative; top:50%; transform:translateY(-50%); display:block; margin:0; float:left;}
    .MobiIcon {background:URL(/Portals/0/Skins/Dotcode/Images/MobiMenuLink.png); width:26px; height:23px; display: block !important; float: right; top: -35px; position: relative; margin-right: 5px; cursor: pointer; display:block;}
    .fa {display:none;}
    .MobileMenu {min-width:380px !important;}
    .MenuContainer, .MenuWrapper {padding:0px !important;}

    #MobileMenu .gomenu .dropdown {background-color:RGBA(0,0,0,0.5); margin:0px !important; padding:0px 10px 10px;}

    .bannerPane {height:200px !important; top:0px !important; position:relative !important;}
    .BannerLinkCon {display:none;}
    .contentcontainer {top:0px !important; position:relative !important;}
    .MainLinks div {background:none !important;}
    .MainLinks H1 {font-size:15px !important; line-height:18px;}
        .MainLinks H1 > span {display:block;}
    .nivo-caption {padding:0px 0px 0px 0px !important}
        .nivo-caption h1 {line-height:20px !important; width:94%; font-size:16px !important; padding:15px 0px 5px !important;}
    .BannerServicesLink {display:none !important;}
    .Theme_02_Light .nivo-directionNav a {width:20px !important; height:16px !important;}
    .Theme_02_Light a.nivo-prevNav {background-position: -22% 60% !important;}
    .Theme_02_Light a.nivo-nextNav {background-position: 121% 60% !important;}
    .nivo-directionNav {bottom: 25px; right: -17px; width: 85px;}
    .HomeContentDiv {float:inherit !important; width:90% !important; margin:0 auto; display:block;}
    .h1, h1 {font-size:20px !important;}
    .h2, h2 {font-size:12px !important;}
    .contentcontainer {padding-top:0px;}
    .contentPane {margin-bottom:0px;}
    .videocontainer h2 {font-size: 25px; line-height: 26px;}
    .videocontainer {height:180px;}
    .VideoOverlay {top: 50%; transform: translateY(-50%);}
    .contentcontainer > .container > .col-sm-4 {padding-left:0px; padding-right:0px;}
    .back {font-size:14px !important; padding:10px !important;}
    .flip-container, .front, .back {height:170px !important;}
    .contentcontainer > .container > .col-sm-4 .front {background-size:46% !important;}
    .contentcontainer > .container > .col-sm-4 .front > h2 {font-size:14px !important;}
    #dnn_dnn_FooterRightInner {padding-top:20px;}
    .FootText, .copyright {font-size:11px !important;}

    /*Content Pages*/
    .bannerPaneContent {height:200px !important;}
        .bannerPaneContent .nivo-main-image {width:auto !important; height:100% !important;}
}

/* Bootstrap edits */
/*override for dnnLabels in the bootstrap */
.form-group .dnnLabel { text-align: left; width: auto; }

.dnnLabel + span { white-space: normal; }
/* ADMIN */

#ControlBar, #ControlBar:before, #ControlBar:after, #ControlBar *:before, #ControlBar *:after,
#ControlBar li, #ControlBar li:before, #ControlBar li:after,
#ControlBar a, #ControlBar a:before, #ControlBar a:after,
.dnn_mact, .dnn_mact:before, .dnn_mact:after, .dnn_mact *:before, .dnn_mact *:after,
.dnn_mact li, .dnn_mact li:before, .dnn_mact li:after { -webkit-box-sizing: content-box !important; /* Safari/Chrome, other WebKit */ -moz-box-sizing: content-box !important; /* Firefox, other Gecko */ box-sizing: content-box !important; /* Opera/IE 8+ */ }

/* fix for DNN dropdown lists being cut off*/
.dnnDropDownList .selected-item, .dnnDropDownList .selected-item a { height: 35px !important; }

/* fix for coloring on DNN Check boxes */
.dnnCheckbox .mark { background: none; }



/*CUBE FLIPS*/
/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 100%;
	height: 280px;
}

.back > div {position:relative; top:50%; transform:translateY(-50%);}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.front, .back {backface-visibility: hidden; position: absolute; top: 0; left: 0; text-align:center;}

/* front pane, placed above back */
.front {z-index: 2; /* for firefox 31 */ transform: rotateY(0deg); background-color:black;}

/* back, initially hidden pane */
.back {transform: rotateY(180deg); background-color:red; padding:20px; color:#ffffff; font-size:18PX;}

/* Icon Hang */
@-webkit-keyframes hvr-icon-hang {
  0% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }

  50% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }

  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@keyframes hvr-icon-hang {
  0% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }

  50% {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
  }

  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@-webkit-keyframes hvr-icon-hang-sink {
  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@keyframes hvr-icon-hang-sink {
  100% {
    -webkit-transform: translateY(6px);
    transform: translateY(6px);
  }
}

.hvr-icon-hang {
  font-size: 25px;
  font-weight: bold;
  text-transform: uppercase;
  color:#0073cc !important;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  content: "\f107";
}
.hvr-icon-hang:before, .hvr-icon-hang:hover:before, .hvr-icon-hang:focus:before, .hvr-icon-hang:active:before {
  content: "\f103";
  position: absolute;
  right: 93px;
  padding: 0 1px;
  font-family: FontAwesome;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  position: Absolute;
  top: 25px;
}
.hvr-icon-hang:before {
  -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang;
  animation-name: hvr-icon-hang-sink, hvr-icon-hang;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
  position: Absolute;
  top: 25px;
  right: 93px;
}

/* Copyright */
div.footer-copyright {
	background: #0C0C0C;
	border-top: 4px solid #111;
	margin-top: 30px;
	padding: 15px 0 15px;
}

div.footer-copyright nav {
	float: right;
}

div.footer-copyright nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

div.footer-copyright nav ul li {
	border-left: 1px solid #505050;
	display: inline-block;
	line-height: 12px;
	margin: 0;
	padding: 0 8px;
}

div.footer-copyright nav ul li:first-child {
	border: medium none;
	padding-left: 0;
}

div.footer-copyright p {
	color: #555;
	margin: 0;
	padding: 0;
}

footer div.alert a {
	color: #222 !important;
}

footer div.alert a:hover {
	color: #666 !important;
}

footer span.phone {
	color: #FFF;
	font-size: 26px;
	font-weight: bold;
	display: block;
	padding-bottom: 15px;
	margin-top: -5px;
}

footer.short {
	padding-top: 50px;
}

footer.short div.footer-copyright {
	background: transparent;
	border: 0;
	padding-top: 0;
	margin-top: 0;
}

footer ul.nav-list.primary > li a {
	border-bottom: 1px solid rgba(255,255,255,0.1);
	line-height: 20px;
	padding-bottom: 11px;
}

footer ul.nav-list.primary > li:last-child a {
	border-bottom: 0;
}

footer ul.nav-list.primary > li a:hover {
	background-color: rgba(255,255,255,0.05);
}

footer ul.recent-work li {
	float: left;
	width: 30%;
	margin: 10px 3% 0 0;
}

footer ul.recent-work li a.thumb-info {
	float: left;
	display: inline-block;
}

footer ul.recent-work img {
	width: 100%;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: gray;
	-webkit-filter: grayscale(100%);
}

footer ul.recent-work li:hover img {
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	-webkit-transform: none;
	transform: none;
}

footer a.view-more-recent-work {
	padding: 12px;
}

footer ul.list.icons li {
	margin-bottom: 5px;
}

.icon {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-map-marker:before {
  content: "\f041";
}
.icon-phone:before {
  content: "\f095";
}
.icon-envelope:before {
  content: "\f0e0";
}
ul.social-icons li.facebook {
	background-position: 0 -120px;
}

ul.social-icons {
	margin: 0;
	padding: 0;
	width: auto;
}

ul.social-icons li {
	background-image: url(../../Skins/Dotcode/Images/social-sprites.png);
	background-repeat: no-repeat;
	background-color: #FFF;
	background-position: 0 100px;
	display: inline-block;
	margin: -1px 1px 5px 0;
	padding: 0;
	border-radius: 100%;
	overflow: visible;
	transition: all 0.3s ease;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3);
	-moz-border-radius: 100%;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-border-radius: 100%;
	-webkit-transition: all 0.3s ease;
}

ul.social-icons li a {
	display: block;
	height: 30px;
	width: 30px;
	text-align: center;
}

ul.social-icons li[class] a {
	text-indent: -9999px;
}

ul.social-icons li a:hover {
	text-decoration: none;
}

ul.social-icons li a i[class^="icon-"] {
	color: #444;
	font-style: 16px;
	position: relative;
	top: 3px;
}

ul.social-icons li a:active {
	box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
	-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.3), inset 0 0 10px rgba(0,0,0,0.3);
}

ul.social-icons li:active,
ul.social-icons li a:active {
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
}

ul.social-icons li.facebook:hover {
	background-position: 0 -150px;
}
ul.social-icons li.twitter {
	background-position: 0 -1140px;
}

ul.social-icons li.twitter:hover {
	background-position: 0 -1170px;
}
ul.social-icons li.youtube {
	background-position: 0 -1380px;
}

ul.social-icons li.youtube:hover {
	background-position: 0 -1410px;
}
ul.social-icons li.linkedin {
	background-position: 0 -540px;
}

ul.social-icons li.linkedin:hover {
	background-position: 0 -570px;
}
ul.social-icons li.skype {
	background-position: 0 -960px;
}

ul.social-icons li.skype:hover {
	background-position: 0 -990px;
}
